Bagaimanakah Saya Menskalakan SVG Sebaris agar Sesuai dengan Bekas Induk Mereka Sambil Mengekalkan Nisbah Aspek?

Menskalakan SVG Sebaris agar Sesuai dengan Bekas Induk

SVG Sebaris menawarkan kefleksibelan untuk menambah grafik vektor terus pada dokumen HTML. Walau bagaimanapun, menskalakannya supaya sepadan dengan saiz bekas induk sambil mengekalkan nisbah aspek boleh menimbulkan cabaran. Begini cara untuk mencapai ini menggunakan atribut viewBox:

Untuk membuat skala SVG sebaris, kami menggunakan atribut viewBox pada elemen SVG. Atribut ini mentakrifkan kotak sempadan imej dalam sistem koordinatnya sendiri. Selepas itu, kami menentukan lebar dan tinggi yang diingini menggunakan atribut lebar dan tinggi, yang relatif kepada halaman yang mengandungi.

Pertimbangkan contoh berikut, yang memaparkan segi tiga 10px kali 20px:

<svg viewbox="0 0 20 10">
    <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0"></polygon>
</svg>

SVG ini akan dipaparkan sebagai segi tiga 10px kali 20px dalam bekas yang diberikan, tanpa mengira saiznya. Atribut ViewBox (0 0 20 10) mentakrifkan sistem koordinat imej, dengan (0,0) sebagai sudut kiri atas dan (20,10) sebagai sudut kanan bawah. Dengan menyatakan atribut lebar dan ketinggian (tidak ditunjukkan dalam contoh), kami menskalakan imej kepada saiz yang dikehendaki berbanding bekas sambil mengekalkan nisbah bidangnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Menskalakan SVG Sebaris agar Sesuai dengan Bekas Induk Mereka Sambil Mengekalkan Nisbah Aspek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!