3

SVG を使用して漫画スタイルのストリート シーンを構築しています。雲がシーンを横切ってスクロールするようにしたいと考えていました。これを行うために、setTimeout または requestAnimationFrame (ブラウザーに依存) を使用して SVG (x) の位置を更新していましたが、そのためにiPadで FPS カウンターが 30fps から 7fps に低下しました。SVG transform="translate(x, y)" を使用して、パフォーマンスが向上するかどうかを再度試しました。それはしませんでした。

最後に、CSS3 変換を試してみようと思い、SVG 要素に直接適用しました。

これはクロムとファイアフォックスでうまくいきました。しかし、Safari (iPad を含む) は、SVG での CSS 変換を受け入れないようです。

これは既知のバグですか? または、これを回避する方法はありますか？ありがとう。

4

2 に答える 2

3

わかりました、これについて 100% 正しいかどうかはわかりませんが、あらゆる種類の動きに対してフレームごとに変換の「x」値を設定しているようです (特に、少なくとも 5 つのレイヤーが存在する複雑な視差状況では)。同時に移動する）は非常に悪い考えです。

また、多くの調査の結果、SVG1.1 はすべてのブラウザーで CSS3 変換を確実にサポートしていないようです。SVG 変換は問題ありませんが、CSS3 は問題ありません。

最後に、この解決策を修正するには、すべての x、y 位置を (0, 0) にリセットし、すべてを-webkit-transform: translate3d(x, y, z) で配置します。（および他のブラウザのバリエーション）。

注: 私は 2D 視差効果にも translate3d を使用し、z を 0 のままにしています。

于 2012-05-10T09:33:00.663 に答える
-1

私はこれに問題はありません。あなたは何か間違ったことをしているに違いありません。

作業例: http://jsfiddle.net/pqyBJ/

于 2012-05-08T18:52:07.197 に答える