控制动画 SVG 中元素的重绘答案

【问题标题】：Controlling repainting of elements in animated SVG控制动画 SVG 中元素的重绘
【发布时间】：2015-02-02 18:30:30
【问题描述】：

我无法弄清楚如何控制通过 <object> 标记嵌入页面中的 SVG 中动画元素的重绘。

当我使用内联 SVG 并检查重绘（使用 Chrome 的“显示重绘矩形”）时，我可以看到只有 SVG 中的动画元素被重绘。但是，当包含相同的 SVG 作为 <object> 时，动画元素似乎会导致整个图像不断地重新绘制。

我尝试过使用velocity.js 和CSS 动画（嵌入在SVG 本身中的关键帧+ 样式）来制作动画。对于后者，当我单独查看 SVG 时，只有动画元素会重新绘制，但是当它嵌入到 <object> 中时，整个元素都会重新绘制。

这似乎效率低下，我想修复它，但我似乎找不到任何关于为什么会发生这种情况或如何防止它的信息。如有任何指示，我将不胜感激。

【问题讨论】：

大概是内部 Chrome 效率低下。您可能必须从源代码下载和构建 Chrome，识别并修复 Chrome 代码中的问题，然后提交补丁来修复它。
哎呀，我想你可能是对的。不幸的是，修复 Chrome 本身可能超出了我的能力。
就浏览器而言，它是一个正在绘制的图像 - 正在绘制并渲染它等 - 这意味着将其作为内联 svg 对动画（和在 V2 beta 中得到更好的支持）。这是完全由浏览器供应商解决的问题之一——如果你能保持内联，那就去做吧！

标签： css animation svg repaint velocity.js

【解决方案1】：

将will-change: transform;css规则添加到对象（或img标签）

will-change 属性允许您提前通知浏览器您可能对元素进行哪些类型的更改，以便它可以在需要它们之前设置适当的优化...

more info

img, object {
  will-change: transform;
}

<img src="https://www.w3.org/TR/SVG/images/animate/anim01.svg" />
<object data="https://www.w3.org/TR/SVG/images/animate/anim01.svg" type="image/svg+xml"></object>

重要提示：此img, object css 规则仅适用于本示例，请勿在生产中使用。使用它将所有图像放入单独的图层中。它会消耗浏览器的内存并且性能会最差

【讨论】：

虽然我喜欢这个标志的想法，但它实际上比无用更糟糕 - 当前的浏览器实现实际上导致性能或质量比根本不使用它更差。
@Rycochet 有趣的是，我对此有很好的体验。基于 chrome 中的性能监视器（更短的绘制任务，但更长的复合层任务），当然取决于文档的复杂程度。
除非最近更改过 - 绘图可以推送到 GPU 上，这会导致非常明显的质量损失，还有其他问题。这是 GSAP 的人写的一篇有用的文章（是的，它是一个竞争对手，但它做事不同，所以这不是问题）-greensock.com/will-change
@Rycochet 我检查了链接，看起来他们在新版本的 chrome 中修复了这些问题。