css - 控制动画 SVG 中元素的重新绘制

Question

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

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

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

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

Answer 1

添加 will-change: transform; 对象(或 img 标签)的 css 规则

The will-change property allows you to inform the browser ahead of time of what kinds of changes you are likely to make to an element, so that it can set up the appropriate optimizations before they’re needed...

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 规则仅适用于此示例，请勿在生产中使用它。使用它将所有图像放入单独的图层中。它会耗尽浏览器内存并且性能会很差