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