Bagaimanakah Saya Menskalakan SVG Sebaris untuk Memasukkan Bekas Induknya Menggunakan `ViewBox`, `width` dan `height`?

Menskala SVG Sebaris dengan Bekas Induk

Apabila bekerja dengan elemen SVG (Grafik Vektor Boleh Skala) sebaris, seseorang sering menghadapi keperluan untuk menskalakan SVG agar sepadan dengan dimensi bekas induknya. Walaupun mungkin untuk mencapai penskalaan dengan merujuk fail SVG luaran, pendekatan ini boleh mengehadkan keupayaan untuk menggayakan SVG menggunakan CSS. Oleh itu, penyelesaian yang lebih diingini ialah dengan menskalakan SVG sebaris secara terus.

Mentakrifkan Koordinat Imej dengan ViewBox dan Menskala dengan Lebar/Ketinggian

Untuk menentukan koordinat dalaman imej SVG dan menentukan cara ia menskalakan , gunakan yang berikut atribut:

• viewBox: Mentakrifkan kotak sempadan imej dalam sistem koordinatnya sendiri.
• lebar: Lebar SVG dalam unit berbanding dengan yang mengandungi halaman.
• tinggi: Ketinggian SVG dalam unit berbanding dengan halaman yang mengandungi.

Sebagai contoh, pertimbangkan SVG sebaris berikut dengan segitiga merah:

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

Di sini, kami ada:

• viewBox (0, 0, 20, 10): Menentukan bahawa SVG mempunyai kotak sempadan segi empat tepat dengan lebar 20 unit dan ketinggian 10 unit.
• lebar (10): Menentukan bahawa SVG hendaklah 10 luas unit berbanding halaman yang mengandungi.
• tinggi (20): Menentukan bahawa SVG hendaklah 20 unit tinggi berbanding dengan halaman yang mengandungi.

SVG ini akan dipaparkan sebagai 10px lebar dan 20px tinggi merah segi tiga.

Atas ialah kandungan terperinci Bagaimanakah Saya Menskalakan SVG Sebaris untuk Memasukkan Bekas Induknya Menggunakan `ViewBox`, `width` dan `height`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!