SVG缩放的最佳方法是什么？转换比例或视图？

Question

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

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

对这两种不同方法的利弊有何看法？

Answer 1

我认为在实际应用程序中，viewbox实际上会更快，而性能基准测试则会显示相反的信息。

有点科学的时间：

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

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

• 变换比例：运行150k次
• ViewBox修改：90k次

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

为什么？

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

结论：计算机速度快;使用viewbox;工作少;在这里优化可能不会给你带来巨大的性能提升。