GPU加速CSS动画与SVG原生动画

Question

我的问题是,什么是更快的原生SVG动画标签,例如:

<path d="something very long and non-human-friendly">
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0" to="360" begin="0s" dur="3s" fill="freeze"
    repeatCount="indefinite" />
</path>

或CSS动画,例如:

path {
    animation: foo 3s ease-out infinite;
}

@keyframes foo {
    50% {
        transform: rotate(360);
}

也许最好使用SVG动画,因为SVG有更好的浏览器支持？

另外相关:由于CSS转换触发硬件加速,我也想知道原生SVG动画标签是否也触发GPU加速或是由浏览器绘制.如果没有,是否可以强制硬件加载SVG原生动画？

干杯!

Answer 1

目前，似乎还没有关于这个话题的完整答案。

我四处寻找更多信息，答案通常取决于您使用 SVG 的实现方式（嵌入、内联）以及您选择支持的浏览器。

一般来说，浏览器开发人员倾向于将工作重点放在 CSS3 优化上，而不是 SVG 优化上，因为第一个优化使用得更频繁。

在这个简单的维基百科页面中，您可以找到一些有关当前状态的示例和其他详细信息，而Mozilla 开发人员中心上的此页面重点介绍了由于使用CSS 变换而由 GPU 加速的过渡的不同性能。