svg - SVG 缩放的最佳方法是什么？变换比例或 View 框？

Question

当我双击该区域时，我创建了代码来缩放我的 SVG 区域。我使用了变换比例属性来实现这一点，将当前比例乘以一个因子(例如 1.2 给出 20% 的缩放)。

我可以对 viewbox 做同样的事情属性的第二个和第三个参数。减少它们将导致区域元素缩放，反之亦然。

对这两种不同方法的优缺点有何看法？

Answer 1

我认为 viewbox 在现实世界的应用程序中实际上会更快，而性能基准将指示相反的信息。

有点科学的时间:

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

jsPerf 似乎给我的测试用了多长时间的数字不正确，因此扭曲了结果，但这是肯定的:转换测试的代码更短，有 0 个字符串操作，并且在更短的时间内运行更多次。

变换规模:运行 15 万次

ViewBox 修改:90k 次

显然，变换规模更快。代码看起来更快，测试被破坏但观察测试运行表明更多的转换运行。但是，我仍然觉得 viewbox 在现实世界的应用程序中更快。

为什么？

无论哪种情况，我都想存储一个单独的对象，指示我的 View 框的当前状态。这个单独的对象对于更新范围 slider 或当前缩放级别的某些指示器很有用。计算完后写入 View 框很容易。

平移仍然需要接触 DOM。

通常在缩放时您还需要平移到中心位置，这意味着您无论如何都需要弄乱 View 框。

它实际上不会影响性能，因为您每秒可以执行很多这样的操作。

结论:电脑速度快；使用 View 框；它的工作量更少；在这里优化可能不会给你带来巨大的性能提升。