我正在使用SVG来建立一个卡通风格的街景，我想让云在场景中滚动。为此，我使用setTimeout或requestAnimationFrame（取决于浏览器）来更新SVG（x）位置，但由于它，FPS计数器在 iPad 上从30fps降至7fps。我再次尝试使用SVG transform =“translate（x，y）”来查看性能是否增加。它没有。
最后，我想我会尝试使用CSS3转换，并将其直接应用于SVG元素：
这在chrome和firefox中运行良好。但Safari（包括iPad）似乎不接受在SVG上进行CSS转换。
这是一个已知的错误吗？或者有办法解决这个问题吗？感谢。
答案 0 :(得分：3)
好吧，我不确定我是否100％正确，但似乎每帧都设置一个变换的“x”值用于任何类型的运动（特别是在复杂的视差情况下，至少5层同时移动）是一个非常糟糕的主意。
经过大量研究后，SVG1.1似乎并不支持所有浏览器的CSS3转换。 SVG转换是可以的，但CSS3不是。
最后修复此解决方案：我只需将所有x，y位置重置为（0,0），并使用 -webkit-transform定位所有内容：translate3d（x，y，z ）。 （以及其他浏览器的变体）。
注意：我使用translate3d即使是2d视差效果，并将z保留为0. translate3d是硬件加速的，并且在iPad上有明显的性能提升。
答案 1 :(得分：-1)
我对此没有任何问题，你必须做错事。