Mengapa Animasi SVG Saya Rosak dalam IE11, dan Bagaimana Saya Boleh Membaikinya?

Isu Animasi SVG dalam IE11: Menangani Had Sokongan

Pengguna IE11 mungkin menghadapi masalah dengan animasi SVG, terutamanya dengan paparan elemen SVG. Animasi pemuatan ringkas yang berfungsi dengan sempurna dalam Firefox dan Chrome mungkin tidak dipaparkan dengan betul dalam IE11, menyebabkan angka SVG tidak kelihatan.

Untuk menyelesaikan isu ini, adalah penting untuk memahami sokongan terhad IE11 untuk ciri SVG. Malangnya, IE11 tidak menyokong peralihan CSS dan animasi untuk elemen SVG, termasuk "stroke-dasharray."

Seperti yang dinyatakan dalam Microsoft Developer Docs, "Microsoft Edge akan menyokong SVG CSS Transitions and Animations, terutamanya stroke-dasharray. " Walau bagaimanapun, pengguna IE11 tidak akan mendapat sokongan ini.

Untuk menunjukkan ini, pertimbangkan contoh yang diubah suai ini:

<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>

Dalam IE11, pemuat tidak akan berputar kerana atribut lejang tiada daripada unsur bulatan. Untuk menjadikannya berputar, tambahkan atribut:

stroke="orange"

Sementara penyelesaian ini menangani isu keterlihatan, menganimasikan SVG stroke-dasharray atau stroke-dashoffset dengan CSS kekal tidak disokong dalam IE11 dan ke bawah.

Untuk melaksanakan penyelesaian animasi SVG penyemak imbas silang, pertimbangkan untuk menggunakan perpustakaan animasi JavaScript seperti GreenSock Animation Platform (GSAP) dengan yang DrawSVGPlugin. Pemalam ini menyediakan sokongan menyeluruh untuk menganimasikan elemen SVG, termasuk stroke-dasharray dan stroke-dashoffset.

Kesimpulannya, sokongan terhad IE11 untuk animasi SVG memerlukan pembangun mencari penyelesaian alternatif, seperti perpustakaan JavaScript, untuk mencapai animasi yang diingini kesan merentas pelayar.

Atas ialah kandungan terperinci Mengapa Animasi SVG Saya Rosak dalam IE11, dan Bagaimana Saya Boleh Membaikinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!