IE11 で SVG アニメーションが壊れるのはなぜですか? どうすれば修正できますか?

IE11 の SVG アニメーションの問題: サポート制限への対処

IE11 ユーザーは、SVG アニメーション、特に SVG 要素の表示で問題が発生する可能性があります。 Firefox と Chrome では問題なく機能する単純な読み込みアニメーションが、IE11 では正しくレンダリングされず、SVG 図が表示されない場合があります。

この問題を解決するには、IE11 の SVG 機能の限定的なサポートを理解することが重要です。残念ながら、IE11 は、「ストローク-ダシャーレイ」を含む SVG 要素の CSS トランジションとアニメーションをサポートしていません。

Microsoft Developer Docs に記載されているように、「Microsoft Edge は、SVG CSS トランジションとアニメーション、特にストローク-ダシャーレイをサポートします。」 」ただし、IE11 ユーザーはこのサポートを利用できません。

これを実証するために、次の変更された例を考えてみましょう。

<svg class="circular-loader" viewBox="25 25 50 50">
  <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="orange" stroke-width="2" stroke-miterlimit="10"/>
</svg>

IE11 では、ストローク属性が円要素。回転させるには、次の属性を追加します。

stroke="orange"

この回避策は可視性の問題に対処しますが、CSS を使用した SVG ストローク ダシャ配列またはストローク ダッシュ オフセットのアニメーション化は、IE11 以下では引き続きサポートされません。

クロスブラウザーの SVG アニメーション ソリューションを実装するには、GreenSock アニメーション プラットフォーム (GSAP) などの JavaScript アニメーション ライブラリをDrawSVGPプラグイン。このプラグインは、ストローク-ダシャーレイやストローク-ダッシュオフセットなど、SVG 要素のアニメーション化に対する包括的なサポートを提供します。

結論として、IE11 の SVG アニメーションのサポートは限定的であるため、開発者は目的のアニメーションを実現するために JavaScript ライブラリなどの代替ソリューションを見つける必要があります。ブラウザ間での効果。

以上がIE11 で SVG アニメーションが壊れるのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。