Mengapa Imej SVG Saya Diherotkan dalam IE9? Peranan ViewBox dan Penskalaan Konsisten.

Perkadaran Imej SVG dalam IE9 dan Peranan ViewBox

Apabila menggunakan imej SVG dalam elemen, adalah dijangka bahawa perkadaran semula jadi imej dikekalkan semasa penskalaan. Walau bagaimanapun, dalam IE9, tingkah laku ini boleh berbeza-beza bergantung pada struktur fail SVG.

Isu:
SVG tertentu, khususnya yang terdiri daripada poligon, gagal menskala secara berkadar dalam IE9 apabila terkandung dalam elemen dengan set sifat CSS ketinggian maksimum. Ini menghasilkan imej yang terbentang atau diherotkan.

Sebab:
Perbezaan dalam gelagat penskalaan antara SVG yang mengandungi poligon dan laluan dikaitkan dengan kehadiran atau ketiadaan atribut ViewBox dalam Fail SVG.

Penyelesaian:
Untuk memastikan penskalaan yang konsisten merentas penyemak imbas, adalah disyorkan untuk sentiasa menentukan atribut ViewBox dalam fail SVG. Atribut ini mentakrifkan ruang koordinat untuk imej SVG. Dengan meninggalkan atribut lebar dan ketinggian

Contoh:
Kod berikut menunjukkan penyelesaian ini:

<code class="xml"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<polygon points="..." />
</svg></code>

Dengan menggabungkan ViewBox, IE9 dan penyemak imbas lain akan secara konsisten menskalakan imej SVG sambil mengekalkan nisbah bidangnya, tanpa mengira kehadiran poligon atau laluan.

Atas ialah kandungan terperinci Mengapa Imej SVG Saya Diherotkan dalam IE9? Peranan ViewBox dan Penskalaan Konsisten.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!