Mengapa SVG Gabungan Saya Tidak Skala Dengan Betul dalam Internet Explorer, dan Bagaimana Saya Boleh Membetulkannya?

SVG Tidak Berskala Dengan Betul dalam IE

Masalahnya

Apabila menggabungkan berbilang SVG menjadi SVG tunggal untuk responsif, IE gagal menskalakan SVG gabungan dengan betul.

Penskalaan IE Isu

IE mempamerkan pepijat apabila ia tidak menskalakan SVG dengan betul melainkan kedua-dua atribut lebar dan ketinggian ditentukan.

Helah Kanvas

Untuk membetulkan isu ini, anda boleh menggunakan teknik yang melibatkan unsur. IE menskala elemen, jadi meletakkan dengan nisbah aspek yang sama seperti SVG akan memaksa SVG untuk menskala dengan betul.

<div>

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

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

Helah ini memastikan bahawa SVG menskala secara berkadar dengan bekasnya, menyelesaikan isu penskalaan dalam IE.

Penyelesaian Alternatif

Sementara helah kanvas berkesan menangani isu penskalaan dalam IE, terdapat pendekatan lain untuk mencapai imej SVG responsif:

• SVG Sebaris: Sertakan terus kod SVG dalam HTML tanpa membuat fail luaran. Kaedah ini menghapuskan keperluan untuk cantuman dan meningkatkan prestasi.
• Bentuk CSS: Gunakan sifat CSS bentuk luar dan laluan klip untuk menggunakan bentuk SVG pada elemen lain. Pendekatan ini amat berguna untuk mencipta bentuk yang kompleks dan responsif.
• Jenis Media SVG: Tentukan berbilang SVG dengan peleraian berbeza dan gunakan pertanyaan media CSS untuk memuatkan yang sesuai berdasarkan lebar port pandangan. Ini memastikan paparan optimum merentas peranti.

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