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

时间:2013-04-24 18:01:53

标签: svg

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

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

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

1 个答案:

答案 0 :(得分:9)

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

有点科学的时间:

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

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

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

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

为什么?

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