Mengapa Animasi SVG Saya Tidak Berfungsi dalam Internet Explorer 11?

Isu Animasi SVG IE11 Selesai: Memahami Sokongan Penyemak Imbas

Dalam sampel kod yang diberikan, elemen SVG yang mewakili bulatan gagal dipaparkan dalam Internet Explorer 11, walaupun animasi kelihatan berfungsi dengan betul. Untuk memahami tingkah laku ini, kita perlu memeriksa sokongan penyemak imbas untuk animasi SVG.

Animasi CSS SVG dalam Internet Explorer

Internet Explorer 11, tidak seperti penyemak imbas moden, tidak menyokong sepenuhnya peralihan dan animasi CSS untuk elemen SVG, khususnya untuk sifat stroke-dasharray. Ini kerana IE11 tidak mempunyai enjin pemaparan yang diperlukan untuk mengendalikan transformasi SVG dengan lancar.

Dokumentasi Pembangun Microsoft

Seperti yang didokumenkan oleh Microsoft, SVG CSS Transitions and Animation hanya disokong dalam Penyemak imbas Microsoft Edge membina 10240 . Ini bermakna bahawa IE11 dan versi Edge yang lebih lama tidak akan memaparkan animasi SVG seperti yang diharapkan.

Pendekatan Animasi Alternatif

Untuk menyelesaikan isu dan memaparkan bulatan SVG dengan betul, terdapat terdapat beberapa pilihan:

• Pastikan Atribut strok adalah Hadir: Dalam kod asal, elemen bulatan SVG tidak mempunyai atribut strok. Menambahnya pada kod akan menjadikan kalangan kelihatan.
• Gunakan Perpustakaan Animasi JavaScript: Perpustakaan seperti GreenSock Animation Platform (GSAP) menawarkan sokongan merentas pelayar untuk animasi SVG, termasuk stroke-dasharray transformasi. Menggunakan DrawSVGPlugin dalam GSAP menyediakan alternatif yang boleh dipercayai kepada animasi CSS untuk elemen SVG.

Kesimpulan

Animasi SVG tidak disokong sepenuhnya dalam IE11 kerana ia terhad keupayaan rendering. Dengan memastikan elemen SVG mempunyai atribut yang diperlukan dan mempertimbangkan pendekatan animasi alternatif seperti perpustakaan JavaScript, pembangun boleh mencapai keserasian merentas pelayar untuk animasi SVG.

Atas ialah kandungan terperinci Mengapa Animasi SVG Saya Tidak Berfungsi dalam Internet Explorer 11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!