在Safari浏览器中将CSS3变换应用于SVG元素

Question

我正在使用SVG构建卡通风格的街景，并希望在场景中滚动云。为此，我使用setTimeout或requestAnimationFrame（取决于浏览器）来更新SVG的（x）位置，但由于这个原因FPS计数器从30fps降至7fps在上。我尝试再次使用SVG transform =“translate（x，y）”来查看性能是否提高。但它没有。

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

这在Chrome和Firefox中运行良好。但Safari（包括iPad）似乎不接受在SVG上使用CSS转换。

这是已知的错误吗？还是有方法解决这个问题？谢谢。

- Simon Willan

Answer 1

好的，我不确定自己是否完全正确，但似乎在任何类型的移动中（特别是在至少5个图层同时移动的复杂视差情况下），每帧设置变换的“x”值都是一个非常糟糕的想法。

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

最后解决方案：我只需将所有的x、y位置重置为(0, 0)，并使用-webkit-transform: translate3d(x, y, z)来定位所有内容。(对于其他浏览器也有相应的变化)。

注意：即使是2D视差效果，我也使用translate3d，并将z设为0。translate3d是硬件加速的，在iPad上具有明显的性能提升。

- Simon Willan

---

是的，我刚刚回答了自己的问题 :) - Simon Willan

为什么不使用_.debounce或throttle，这样它就不会在每次移动时都改变呢？ - NoBugs

Answer 2

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

工作示例：http://jsfiddle.net/pqyBJ/

- bennedich

---

我推测Simon想要在内部SVG元素上应用CSS3变换，而不是根元素。 - basecode

但是它在IE11上无法工作，有没有办法在IE中处理？ - Soundar