Javascript 动态调整svg文件大小的最佳方法是什么？

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

首先，我可以更改svg的x、y、宽度和高度值。第二，我可以通过setAttribute调用添加缩放变换。或者，第三，我可以修改viewbox元素属性。第四种选择可能是将其中一种或多种组合起来

有没有一种方法比其他方法更有效

谢谢,， -克里斯托弗

编辑**添加JSFIDLE svg示例。

---

从该示例中，您可以看到原始svg图像。第二幅图像更改了viewbox，它基本上将整个内容缩放了2倍。它使svg视口的大小保持不变。第三幅图像通过将宽度和高度属性放大一倍来放大。通过设置“变换比例”属性放大的最后一幅图像。最后两个图像的视图端口大小是svg的两倍。

好的，有几点可能会对您有所帮助

1——创建一个全局svg容器，并将其设置为视图端口

2--创建单个g元素以获取整个视口

3——在g元素内插入将显示的所有其他元素

平移和缩放

---

只需修改更高级别g元素上的transform属性，放大实际上可以缩放100%以上，缩小比例在100以下，平移只是进行平移，这些事情是不同的。试一下，你会发现它们不一样，但都可以在视觉上模拟放大或缩小。我编辑了我的原始帖子，其中包含了一个JSFIDLE，它展示了每种方法如何本质上缩放svg文件。最好的方法是主观的，但svg确实通过外部元素的currentScale和currentTranslate字段提供了本机缩放功能。在我的测试中，这三种方法各有优缺点。我喜欢修改宽度和高度的灵活性。我可以增加宽度，直到达到当前文档宽度。但是，如果图像的一部分超过了页面宽度，则会对其进行剪裁，如果图像的大小随后减小，则剪裁的部分永远不会重新绘制。viewbox方法不允许偶尔更改视口的大小。Scale方法使svg的元素与svg边界之外的其他html元素重叠。