我正在使用hammer.js触摸函数为svg文件开发缩放和拖动功能。我知道有多种方法可以调整svg文件的大小，这与修改典型的jpg或png文件的方式不同。我想知道这些方法中哪一个最适合使用hammer.js进行缩放。我不是在修改svg中的单个元素，而是在修改整个svg文件。

第一，我可以改变svg的x、y、宽度和高度值。第二，我可以使用setAttribute()调用添加比例转换。第三，我可以修改viewbox元素属性。第四个选项可能是将其中一个或多个组合起来。

是否有一种方法比其他方法更有效?

谢谢你,——克里斯多夫

• 编辑**添加jsfiddle svg示例。http://jsfiddle.net/LM2U6/

  <svg version="1.1" style="border:1px solid #00f;" id="testsvg" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> <rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /> </svg> <svg version="1.1" style="border:1px solid #00f;" id="testsvg4" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="50 50 100 100" xml:space="preserve" > <rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /> </svg> <svg version="1.1" id="testsvg2" style="border:1px solid #00f;" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400" height="400" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> <rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /> </svg> <svg version="1.1" style="transform:matrix(2,0,0,2,100,100);border:1px solid #00f;" id="testsvg3" preserveAspectRatio="xMinYMin slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> <rect x="75" y="75" width="50" height="50" style="stroke: #3333cc; fill:none;" /> </svg>

从示例中，您可以看到原始的svg图像。第二张图片改变了viewbox，它基本上将整个内容放大了2倍。它保持svg视口的大小不变。第三张图片通过将宽度和高度属性加倍放大。通过设置transform scale属性将最后一张图像放大。最后两个图像使svg的视图端口大小增加了一倍。