什么是SVG缩放的最佳方案？使用Transform Scale还是Viewbox？

Question

我已经编写了代码，当我双击区域时，可以缩放我的SVG区域。我使用了transform scale属性来实现这一点，将当前比例乘以一个因子（例如1.2，以提供20%的缩放）。

我也可以通过操作viewbox属性的第二个和第三个参数来达到同样的效果。减小它们会导致区域元素缩小，反之亦然。

对于这两种不同方法的优缺点有什么观察意见吗？

- gextra

---

一个更容易，一个更难。两者在性能影响方面执行相同的操作。投票关闭，因为这不是一个有建设性的问题；抱歉。 - Phrogz

使用 svgRootElm.currentScale*=factor 可能更好，因为它更直接，而且不会触及文档树中的任何实际属性。 - Erik Dahlström

Erik的评论证明了我的问题。有两种方法，我的问题旨在了解哪种方法更好。缩放是矢量图形（SVG）采用的重要部分/概念。请继续保持这个问题的活跃状态。谢谢。 - gextra

似乎在Chrome和IE上都能实现相同的效果，但在Firefox上我无法让“currentScale”的方法起作用。因此，如果你的目标是这三个浏览器，我猜你将不得不使用“viewBox”属性来完成所有工作，它在所有这些浏览器中似乎都能正常工作。 - Naor Biton

Answer 1

我认为在实际应用中，使用viewbox会更快，尽管性能基准测试会显示相反的信息。

略微科学的时间:

我创建了一个jsPerf：http://jsperf.com/transform-scale-vs-viewbox-scale

jsPerf似乎给我错误的测试时间，从而扭曲了结果，但是这一点是确定的：变换测试的代码更短，没有字符串操作，并且在更短的时间内运行了更多次。

• Transform Scale：运行150k次
• ViewBox Modification：90k次

显然，transform scale更快。代码看起来更快，测试已经损坏，但是观察测试运行表明变换运行更多次。但是，我仍然觉得在实际应用中，viewbox更快。

为什么？

1. 无论哪种情况，我都想存储一个单独的对象，指示视口的当前状态。这个单独的对象对于更新范围滑块或当前缩放级别的某个指示器很有用。在计算后编写视图框很容易。
2. 平移仍然需要触摸DOM。
3. 通常在缩放时，您还需要平移以重新居中，这意味着您仍然需要使用viewbox。
4. 它实际上不会影响性能，因为您可以每秒执行如此多的操作。

结论：计算机很快；使用viewbox；这样做更少的工作；在这里进行优化可能不会给您带来巨大的性能提升。

- Parris

---

使用 transform scale，您可以应用过渡效果。您能否将其应用于视口框（viewbox）？ - clapas