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

IE11 SVG アニメーションの問題解決: ブラウザーのサポートについて

指定されたコード サンプルでは、​​円を表す SVG 要素がインターネットで表示されません。 Explorer 11 では、アニメーションは正しく機能しているように見えます。この動作を理解するには、ブラウザによる SVG アニメーションのサポートを調べる必要があります。

Internet Explorer の SVG CSS アニメーション

Internet Explorer 11 は、最新のブラウザとは異なり、 SVG 要素、特にストローク-dasharray プロパティの CSS トランジションとアニメーションを完全にサポートします。これは、IE11 には、SVG 変換をスムーズに処理するために必要なレンダリング エンジンが欠けているためです。

Microsoft Developer Documentation

Microsoft の文書に記載されているように、SVG CSS トランジションとアニメーションは、 Microsoft Edge ブラウザーのビルド 10240 。これは、IE11 以前のバージョンの Edge では、SVG アニメーションが期待どおりにレンダリングされないことを意味します。

代替アニメーション アプローチ

問題を解決して SVG サークルを正しく表示するには、次の手順を実行します。いくつかのオプションがあります:

• ストローク属性が現在: 元のコードでは、SVG の円要素にはストローク属性がありません。これをコードに追加すると、円が表示されます。
• JavaScript アニメーション ライブラリを使用します: GreenSock アニメーション プラットフォーム (GSAP) などのライブラリは、ストローク ダシャーレイを含む SVG アニメーションのクロスブラウザ サポートを提供します。変換。 GSAP 内で DrawSVGPlugin を使用すると、SVG 要素の CSS アニメーションの信頼できる代替手段が提供されます。

結論

SVG アニメーションは制限があるため、IE11 では完全にはサポートされていません。レンダリング機能。 SVG 要素に必要な属性があることを確認し、JavaScript ライブラリなどの代替アニメーション アプローチを検討することで、開発者は SVG アニメーションのブラウザ間の互換性を実現できます。

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