Bagaimanakah Saya Boleh Membuat Skala SVG Sebaris dengan Bekas Induknya?

Menskalakan SVG Sebaris dengan Bekas Induknya

Menggabungkan elemen SVG sebaris ke dalam kod HTML menawarkan kelebihan untuk menggayakannya dengan CSS. Walau bagaimanapun, menskalakan elemen SVG sedemikian agar sepadan dengan dimensi bekas induknya boleh menjadi satu cabaran.

Penyelesaian

Untuk menskalakan SVG sebaris dengan bekas induknya, ini adalah diperlukan untuk menggunakan atribut viewBox bersamaan dengan lebar dan ketinggian atribut:

1. atribut viewBox: Atribut ini mentakrifkan kotak sempadan imej SVG dalam sistem koordinatnya sendiri. Ia menetapkan nisbah bidang dan dimensi awal imej SVG. Dengan menetapkan atribut ini, anda boleh menentukan koordinat dalam imej SVG secara bebas daripada saiz berskalanya.
2. atribut lebar dan tinggi: Atribut ini menentukan lebar dan tinggi elemen SVG dalam mengandungi halaman. Mereka mengawal saiz imej SVG seperti yang dipaparkan pada halaman. Dengan menetapkan atribut ini berbanding dengan dimensi bekas (cth., menggunakan peratusan), anda boleh menskalakan imej SVG secara berkadar.

Sebagai contoh, pertimbangkan kod berikut:

<svg viewBox="0 0 123 456" width="100%" height="100%">
  <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

Dalam contoh ini, imej SVG dengan saiz asli 123px kali 456px diskalakan untuk mengisi keseluruhan bekas. Atribut viewBox mentakrifkan koordinat poligon dalam imej SVG itu sendiri, manakala atribut lebar dan ketinggian menskalakan imej SVG kepada dimensi bekas. Akibatnya, poligon menjadi segi tiga merah 100% lebar dalam bekas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Skala SVG Sebaris dengan Bekas Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!