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

Question

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

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

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

Answer 1

我认为在实际应用程序中,viewbox实际上会更快,而性能基准测试将指示相反的信息.

有点科学的时间:

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

jsPerf似乎给出了不正确的数字,因为测试花了多长时间来扭曲结果,但是这很可靠:转换测试的代码更短,有0个字符串操作并且在更短的时间内运行了更多次.

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

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

为什么？

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

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