1

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

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

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

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

4

1 回答 1

0

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

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

更多信息

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

于 2018-05-08T18:03:19.517 回答