Animation 对Safari中的SVG元素应用CSS3转换

我正在使用SVG建立一个卡通风格的街道场景，我想让云在场景中滚动。为此，我使用setTimeout或requestAnimationFrame（取决于浏览器）来更新SVGs（x）位置，但在iPad上，FPS计数器因此从30fps下降到7fps。我再次尝试使用SVG transform=“translate（x，y）”查看性能是否有所提高。事实并非如此

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

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

---

这是已知的bug吗？还是有办法解决这个问题？谢谢。

我对此没有问题，你一定做错了什么

---

工作示例：

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

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

最后修复此解决方案：我只需将所有x，y位置重置为（0，0），并使用-webkit transform:translate3d（x，y，z）定位所有位置。（和其他浏览器的变体）

---

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

是的，我只是回答了我自己的问题：）为什么不使用uu.debounce或throttle，这样它就不会在每个动作中都改变它？我想Simon想在内部SVGElement而不是根上应用CSS3 transform。但它在IE11上不起作用，在IE中有什么需要处理的吗？