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

Question

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

我可以对viewbox属性的第二个和第三个参数执行相同的操作。减少它们将导致区域元素缩放，反之亦然。

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

Answer 1

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

有点科学的时间：

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

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

• Transform Scale：运行 150k 次
• ViewBox 修改：90k 次

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

为什么？

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

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