Mengapa SVG Saya Tidak Berskala dengan Betul dalam Internet Explorer?

SVG tidak Berskala dengan betul dalam IE - mempunyai ruang tambahan

Masalah: Apabila menggunakan simbol SVG untuk responsif, SVG tidak berskala dengan betul dalam Internet Explorer (IE).

Jawapan: IE mempunyai pepijat yang menghalang SVG daripada berskala dengan betul melainkan kedua-dua lebar dan tinggi dinyatakan.

Penyelesaian:

Gunakan helah yang ditemui oleh Nicolas Gallagher:

1. Tambah elemen dengan nisbah bidang yang sama seperti SVG kepada <div> mengandungi SVG.
2. Buat tidak kelihatan dengan keterlihatan: tersembunyi.
3. Letakkan SVG sepenuhnya dalam <div> dan tetapkan lebarnya kepada 100%.

Kod:

<div>

CSS:

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

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

Nota: Helah ini memaksa IE untuk menskalakan SVG dengan betul dengan menggunakan sebagai rujukan.

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!