Question

我使用了一个相当复杂的内联SVG，其中包含1000多个单独的路径。我需要动态地设置几个路径的样式和动画。因此，我无法使用普通的PNG / JPG图像。

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

有一个类似的问题关于SVG性能与工作小提琴。不同之处在于我同时使用一个大SVG而不是800+：Why is SVG scrolling performance so much worse than PNG?

有关如何改善Chrome效果的任何想法？这似乎是一个铬虫。那么也许有一种解决方法？

修改

这是一个带有类似SVG文件的JSFiddle。由于版权原因，我无法准确提供原始SVG。当您在此示例中滚动SVG时，您会注意到Chrome中的滚动性能较低：https://jsfiddle.net/0dsnymry/1/

Answer 1

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

<div style="position: relative">
  <img src="img1.svg" />
  <img src="img2.svg" style="position: absolute; top: 0; left: 0; width: 100%" />
  <img src="img3-animation.svg" style="position: absolute; top: 0; left: 0; width: 100%" />
</div>

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

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

其他解决方案是在父元素上包含contain: paint（对于非动画SVG图像，据称这将阻止Chrome重新绘制每张滚动的SVG图像，而是将其缓存为位图图像并简单地移动它-我发现混合结果实际上似乎有所帮助），或类似地将buffered-rendering: static应用于SVG文件（我再次发现混合袋子-不知道对此的支持是什么，或者不确定考虑到它的年龄和最新的文件资料，它是残留物。

复杂的SVG在Chrome中表现不佳

1 个答案: