复杂的 SVG 在 Chrome 中表现不佳答案

【问题标题】：Complex SVG has bad performance in Chrome复杂的 SVG 在 Chrome 中表现不佳
【发布时间】：2018-04-23 18:48:06
【问题描述】：

我正在使用一个相当复杂的内联 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/

2020 年 1 月编辑：

我不再遇到这个问题了。可能会在较新的 Chrome 版本中得到修复。

【问题讨论】：

你能提供一个你的 svg 的工作示例吗？
我编辑了原始问题。
它在 Chrome 中是否比在其他浏览器中更明显？如果是，那么肯定值得向 Chromium 团队报告。另请参阅其他 SVG 性能问题报告，例如：crbug.com/606684、crbug.com/664114、crbug.com/687547 或 crbug.com/781344

标签： html css performance google-chrome svg

【解决方案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 文件中也非常有用，因此每张图像只有 1 个动画。

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

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

【讨论】：