Mengapa SVG Saya Tidak Berskala dengan Betul dalam Internet Explorer, dan Bagaimana Saya Boleh Membetulkannya?

SVG Tidak Menskala Dengan Betul dalam IE

Mengapa ini berlaku?

IE mempunyai pepijat yang diketahui di mana ia tidak menskala SVG dengan betul jika kedua-duanya lebar dan tinggi tidak dinyatakan dengan jelas.

Cara membetulkan ia?

Untuk menyelesaikan isu ini dalam IE, helah yang ditemui oleh Nicolas Gallagher boleh digunakan. Teknik ini menggunakan elemen, yang IE skala dengan betul. Dengan meletakkan dengan nisbah aspek yang sama seperti SVG dalam <div> mengandungi SVG, ia memaksa SVG untuk memaparkan dalam saiz yang betul.

Pelaksanaan

Berikut ialah kod yang dikemas kini dengan helah:

<div>

Penggayaan Tersuai

Untuk meletakkan elemen dengan betul, tambah CSS berikut:

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

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

Dengan pelarasan ini, SVG harus berskala dengan betul dalam Internet Penjelajah.

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