在Mozilla Firefox中使用svg-pan-zoom.js性能问题进行SVG缩放

时间:2015-05-11 06:54:31

标签: javascript firefox svg svgpanzoom

我正在使用javascript svg-pan-zoom.js(https://github.com/ariutta/svg-pan-zoom)libary来缩放和平移Web应用程序中的svg。放大Firefox是非常缓慢和滞后的,而放大Chrome和IE11的效果非常好(使用5MB .svg文件进行测试,提供平面图 - 如果文件较小,这个问题并不明显)。平移工作正常。我在论坛上已经阅读了很多关于这个问题的主题,但我还没有找到任何解决方案。有谁知道导致这个问题的原因以及如何解决这个问题?

Example: http://jsfiddle.net/coz3fd0L/3/

1 个答案:

答案 0 :(得分:3)

检查您的refreshRate选项。也许你设置了一个很高的数字。 如果没有,那么你可以设置一个较低的数字(例如10,这意味着每秒最多10帧),如果可以改善你的问题。

除此之外,我不知道svg-pan-zoom中的任何其他问题。至少如果平移是平滑的,那么缩放应该是相同的。

也许你的SVG有很多边/曲线/节点,而Firefox在修改这些东西方面很糟糕。或者在使用矩阵变换时调整大SVG的大小是不好的(矩阵变换用于svg-pan-zoom中的缩放/平移)。

更新:从我看来,这纯粹是一个Firefox问题(或者它的方式)。只需从示例http://imgh.us/test_51.svg打开SVG即可获得100%的CPU(用于页面滚动)。

此外,我确实尝试手动更改矩阵变换值(以测试它是否是svg-pan-zoom问题)并且它无论如何都非常慢。

我看到的唯一解决方案是尝试优化您的SVG(也许可以使它们更简单:更少的边缘,节点,不渲染白色元素......)。