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

mengandungi SVG, ia memaksa SVG untuk memaparkan dalam saiz yang betul.

Pelaksanaan

Berikut ialah kod yang dikemas kini dengan helah:

<div>
<h3 id="Penggayaan-Tersuai">Penggayaan Tersuai</h3>
<p>Untuk meletakkan elemen dengan betul, tambah CSS berikut:</p>
<pre class="brush:php;toolbar:false">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.