4

SVGアニメーションが利用可能かどうかを検出し、DOMを適切に調整する良い方法はありますか？

gを含むimagesのモーションをアニメーション化するためにanimateMotionを使用しています。これはMozillaでのみ機能します。さらに悪いことに、animateMotion起動していないと、MozillaとWebKitの両方で画像が異なる位置に残ります（ただし、それぞれで同じ場所ではありません！）。

各シナリオに対応するためにgと画像のプロパティを調整し、機能するanimateMotion場合にのみタグを追加する方法が必要なようです。助言がありますか？

4

3 に答える 3

2

Modernizrは、高レベルの機能の存在のみを検出し、ブラウザが嘘をつかないことを信頼します。たとえば、デスクトップSafariには、ModernizrのSMILに対して大きな「はい」があります。ただし、SMILはほとんどすべてのブラウザ（Firefox 4も含む）に部分的にしか実装されていないため、個々の属性アニメーションをテストして、どれが機能しているかを正確に把握する必要があります。

たとえば、SMILを使用してDesktopSafariのパスアニメーションのテキストのstartOffsetをアニメーション化することはできません。このような機能の存在を検出するライブラリはありません。

IMHO、それらが存在する場合は、IE以外のすべての汎用アニメーションにCSS変換/アニメーションを使用する必要があります。IEの場合は、Javascript（またはCanvas）アニメーションを使用します。

（ところで、ChromeのanimateTransformは壊れています-翻訳を誤って計算します）

于 2011-04-11T19:06:13.427 に答える
2

Android4.2.2を実行しているSamsung電話でこの問題が発生しました。これらの3つすべてに当てはまると報告されますModernizr.svg, Modernizr.svgclippaths, Modernizr.smilが、アニメーションや、混乱したクリップパスはありません。クリップパスを持つことができる要素は1つだけのように見えました。とにかく、私たちはこのそれほど素晴らしい解決策で終わりませんでした：

isAndroid = /Android/.test( navigator.userAgent );

申し訳ありませんが、Androidユーザーの方は、バックアップ画像のみが表示されます。これはひどい修正ですが、それは単純なロゴアニメーションのためだけだったので...

于 2014-05-02T15:53:58.143 に答える
0

Modernizrは、SVGアニメーション（SMIL）のサポートを検出します。

完全な例がなければ、何が違いを引き起こしているのかを確実に言うことは不可能です。

于 2011-04-10T10:54:56.410 に答える