Bagaimanakah Saya Membuat Skala SVG Sebaris Secara Berkadar dengan Bekas Induknya?

Menskalakan SVG Sebaris Secara Berkadar dengan Bekas Induk

Memiliki skala SVG sebaris berkadaran dengan bekas induknya ialah cara mudah untuk mengubah saiz SVG secara dinamik kandungan. Ini adalah wajar apabila anda perlu membenamkan grafik SVG dalam elemen HTML dan memastikan ia berskala dengan sewajarnya. Begini cara untuk mencapainya:

<svg viewBox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50" />
</svg>

Dalam contoh ini, elemen SVG mempunyai lebar 100 dan ketinggian 50, seperti yang ditakrifkan oleh atribut ViewBox. Elemen poligon mewakili segi tiga yang merentangi keseluruhan lebar dan ketinggian SVG.

Atribut ViewBox menentukan koordinat kandungan SVG. Dalam kes ini, koordinat berjulat dari 0 hingga 100 secara mendatar dan 0 hingga 50 secara menegak. Walaupun anda mengubah saiz elemen SVG menggunakan CSS, segi tiga akan sentiasa memenuhi keseluruhan kawasan ViewBox.

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

Dengan menetapkan lebar elemen SVG, kami boleh menentukan saiz yang diingini bagi elemen yang mengandungi. Ketinggian akan dilaraskan secara automatik untuk mengekalkan nisbah bidang SVG, memastikan segi tiga kekal berkadar skala.

Pendekatan ini membolehkan anda membenamkan SVG dalam elemen HTML dan mengawal saiznya secara dinamik tanpa menggunakan fail luaran atau mengorbankan penggayaan pilihan.

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