animation - 在 Safari 中将 CSS3 转换应用于 SVG 元素

Question

我正在使用 SVG 构建一个卡通风格的街景，我想让云朵在场景中滚动。为此，我使用 setTimeout 或 requestAnimationFrame(取决于浏览器)来更新 SVG (x) 位置，但 iPad 上的 FPS 计数器因此从 30fps 下降到 7fps。我再次尝试使用 SVG transform="translate(x, y)"来查看性能是否有所提高。它没有。

最后，我想我会尝试使用 CSS3 转换，并将其直接应用于 SVG 元素:

这在 chrome 和 firefox 中运行良好。但是 Safari(包括 iPad)似乎不接受在 SVG 上进行 css 转换。

这是一个已知错误吗？或者有办法解决这个问题吗？谢谢。

Answer 1

好吧，我不确定我是否 100% 正确，但似乎为任何类型的运动设置每一帧变换的“x”值(尤其是在复杂的视差情况下，至少5层同时移动)是一个非常糟糕的主意。

此外，经过大量研究，SVG1.1 似乎确实不支持跨所有浏览器的 CSS3 转换。 SVG 转换可以，但 CSS3 不行。

最后修复这个解决方案:我只是将所有 x、y 位置重置为 (0, 0)，并使用 -webkit-transform 定位所有内容:translate3d(x, y, z )。 (以及其他浏览器的变体)。

注意:我什至将 translate3d 用于 2d 视差效果并将 z 保留为 0。translate3d 是硬件加速的，并且在 iPad 上有明显的性能提升。