Rumah >hujung hadapan web >tutorial css >Mengapa SVG Saya Tidak Berskala dengan Betul dalam Internet Explorer?

Mengapa SVG Saya Tidak Berskala dengan Betul dalam Internet Explorer?

DDD
DDDasal
2024-12-31 20:30:15997semak imbas

Why Are My SVGs Not Scaling Correctly in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn