【发布时间】：2014-07-03 17:11:19
【问题描述】：
我正在使用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 图像。第二张图片改变了视图框，它基本上将整个内容缩放了 2。它保持 svg 视口的大小相同。通过将宽度和高度属性加倍来放大第三张图像。通过设置变换比例属性放大最后一张图像。最后两张图片是 svg 视口大小的两倍。
【问题讨论】：
-
那些东西不一样。试试看，你会看到的。
-
它们不一样，但都可以在视觉上模拟放大或缩小。我编辑了我的原始帖子以包含一个 jsfiddle，它显示了每种方法如何从本质上缩放 svg 文件。
-
最好是主观的，但 SVG 确实通过外部
<svg>元素的 currentScale 和 currentTranslate 字段提供本机缩放功能。 -
在我的测试中，这三种方法都有优点和缺点。我喜欢修改宽度和高度的灵活性。我可以增加宽度，直到它达到当前文档的宽度。但是，如果图像的一部分超出页面宽度，则会被剪裁，并且如果图像的尺寸随后变小，则剪裁部分永远不会重绘。 viewbox 方法不允许更改视口的大小，这是我有时需要的。并且 Scale 方法会导致 svg 的元素与 svg 边框之外的其他 html 元素重叠。
标签： javascript svg resize transformation hammer.js