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

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

IE11 で SVG アニメーションが機能しないという状況では、ブラウザーの互換性から根本的な問題が発生します。 Microsoft Edge は、SVG CSS トランジションとアニメーション、特にストローク dasharray に関連するトランジションとアニメーションをサポートする唯一のブラウザです。

IE11 の非互換性

Microsoft Developer Docs で概要が説明されているように、IE11 はサポートしています。 SVG 要素の CSS トランジションとアニメーションはサポートされていません。具体的には、ストローク-ダシャレーとストローク-ダシャオフセットのアニメーション化がサポートされていません。その結果、IE11 では SVG サークルが表示されません。

IE11 の解決策

IE11 との互換性を確保するには、ブラウザが IE かどうかを確認する必要がありますそれに応じてストローク ダッシュアレイを調整します。ただし、このソリューションはブラウザのスニッフィングが必要なため、理想的ではありません。

クロスブラウザ ソリューション

クロスブラウザ ソリューションの場合は、GreenSock などの JS アニメーション ライブラリの使用を検討してください。 DrawSVGPlugin を使用したアニメーション プラットフォーム (GSAP)。このプラグインは、すべての主要ブラウザで SVG 要素 (ストローク-ダシャーレイやストローク-ダッシュオフセットなど) のアニメーション化のサポートを提供します。

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