我正在使用具有1000多个单独路径的相当复杂的嵌入式SVG。我需要动态设置样式并设置动画路径。因此，我不能使用普通的PNG / JPG图像。

如果我在使用SVG的区域上滚动，Chrome会变慢并且帧率会急剧下降。即使没有动画/样式化SVG路径。到目前为止，在Firefox和Safari中都没有性能问题。

关于SVG性能和提琴的工作存在类似的问题。不同之处在于，我使用的是一个大型SVG，而不是同时使用800+：为什么SVG滚动性能比PNG差很多？

有什么想法可以改善Chrome的性能吗？好像是铬虫。所以也许有解决方法？

编辑：

这是带有类似SVG文件的JSFiddle。由于版权原因，我无法完全提供原始SVG。在此示例中，当您在SVG上滚动时，您会发现Chrome中的滚动性能较低：https：//jsfiddle.net/0dsnymry/1/

编辑2020年1月：

我再也没有遇到这个问题。可能会在较新的Chrome版本中修复。

对于仍然遇到此问题的任何人，我发现最好的解决方案是将SVG文件分离成几个不同的图像，并将它们彼此绝对定位在相对位置的div中，即

将动画分成自己的SVG文件也非常有用，因此每个图像只有1个动画。

听起来有些违反直觉，尽管许多SVG会导致Chrome性能下降，但要使复杂的SVG渲染效果更好，您应该包含多个SVG文件，但这似乎要取得平衡。您应该一次限制页面上可见的SVG文件的数量，但是要权衡以确保SVG不太复杂。

其他解决方案是在父元素上包含contain: paint(对于非动画SVG图像，据称这将阻止Chrome重新绘制每张滚动的SVG，而是将其缓存为位图并简单地移动它-我发现混合的结果实际上似乎有帮助)或类似地将buffered-rendering: static应用于SVG文件(我又发现了一个混合包-不确定对此的支持是什么，或者不确定它的年龄和看似是否残留较差的最新文档)。