Mengapa SVG Saya Tidak Berskala dengan Betul dalam Internet Explorer?

SVG gagal menskala dengan betul dalam IE kerana kekurangan lebar dan ketinggian

Dalam soalan ini, pengguna menghadapi masalah penskalaan dengan SVG dalam Internet Explorer. Ralat berpunca daripada ketiadaan atribut lebar dan ketinggian yang jelas dalam SVG.

Penyelesaian: Menyediakan atribut lebar dan tinggi

Untuk menyelesaikan isu tersebut, pengguna menggunakan teknik yang ditemui oleh Nicolas Gallagher, yang melibatkan penggunaan tersembunyi; elemen untuk menyediakan nisbah aspek yang diperlukan untuk SVG.

Pelaksanaan:

1. Tambah elemen pada HTML, dengan atribut lebar dan ketinggiannya ditetapkan agar sepadan dengan saiz SVG.
2. Sembunyikan menggunakan CSS dengan menetapkan keterlihatannya kepada tersembunyi.
3. Letakkan SVG sepenuhnya dalam <div> menggunakan CSS.

CSS:

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

HTML:

<div>

Dengan melaksanakan penyelesaian ini , pengguna berjaya menyelesaikan isu penskalaan dalam Internet Explorer, membenarkan SVG dipaparkan dengan betul.

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