Mengapa Skala SVG Saya Salah dalam IE9, Tetapi Hanya Sebahagian daripadanya?

Kadaran SVG Terherot dalam IE9 untuk Imej Tertentu

Apabila menggunakan SVG dalam elemen img, anda mungkin menghadapi isu penskalaan yang tidak dijangka. Dalam Internet Explorer 9, SVG tertentu mungkin tersalah skala, gagal mengekalkan perkadaran asalnya. Ini boleh berlaku walaupun menentukan ketinggian maksimum melalui CSS.

Percanggahan timbul apabila menggunakan SVG yang terdiri daripada laluan berbanding poligon. Contohnya, imej "crocs.svg" yang disebut dalam soalan tidak berskala dengan betul, manakala imej "groovy.svg" berskala.

Penyelesaian: Pastikan ViewBox dan Abaikan Atribut Lebar/Ketinggian Elemen

Untuk menyelesaikan isu ini dan memastikan penskalaan yang konsisten merentas penyemak imbas, adalah disyorkan untuk sentiasa menentukan atribut ViewBox dalam elemen SVG anda. Walau bagaimanapun, biarkan atribut lebar dan ketinggian kosong.

Dengan melakukan ini, anda mentakrifkan secara eksplisit dimensi SVG dan membenarkan penyemak imbas mentafsir sifat ketinggian maksimum CSS dengan sewajarnya. Ia memastikan penskalaan yang lebih konsisten merentas pelbagai penyemak imbas.

Untuk pemahaman lanjut, rujuk halaman ujian ini: [Pautan Halaman Ujian]. Halaman ini menyediakan pelbagai contoh atribut SVG dalam kombinasi dengan spesifikasi lebar dan ketinggian CSS. Dengan membandingkan penskalaan dalam penyemak imbas yang berbeza, anda boleh melihat kesan atribut ini pada pemaparan SVG.

Atas ialah kandungan terperinci Mengapa Skala SVG Saya Salah dalam IE9, Tetapi Hanya Sebahagian daripadanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!