SVG アニメーションが Internet Explorer 11 で動作しないのはなぜですか?

SVG アニメーションが IE11 で表示されない

アニメーションを SVG Figure に組み込もうとすると、アニメーションがInternet Explorer 11 (IE11) ではレンダリングに失敗します。アニメーションが適切に機能しているにもかかわらず、SVG 要素 (通常は円) は非表示のままです。

IE11 の SVG 要素の CSS トランジションとアニメーション

残念ながら、IE11 では完全には表示されません。 SVG 要素の CSS トランジションとアニメーション、特にアニメーションの作成に使用されるストローク-dasharray プロパティをサポートします。これは、基礎となるレンダリング エンジンの制限によるものです。

Microsoft Developer Docs

Microsoft Developer Docs によると、SVG 要素の CSS トランジションとアニメーションのサポートは予約されています。マイクロソフト専用Edge.

回避策

IE11 で目的のアニメーション効果を実現するには、GreenSock アニメーション プラットフォーム (GSAP) やその DrawSVGPlugin などの JavaScript アニメーション ライブラリの使用を検討してください。このプラグインは、アニメーション化する SVG 要素 (ストローク ダシャーレイやストローク ダッシュオフセットなど) にブラウザ間の互換性を提供します。

代替アプローチ

古いバージョンの IE との互換性がない場合優先的に、円要素のストローク属性を使用してアニメーションを組み込むことを検討してください。ただし、IE11 の制限を補うために、ストローク ダシャーレイの値を調整する必要がある場合があります。

結論

Web 開発では、さまざまなブラウザの制限を理解することが重要です。 。 SVG アニメーションが IE11 で機能しないなどの問題が発生した場合は、関連ドキュメントを参照し、さまざまなプラットフォーム間での互換性を確保するための代替アプローチを検討してください。

以上がSVG アニメーションが Internet Explorer 11 で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。