Bagaimanakah Saya Boleh Menskalakan SVG Sebaris agar Sesuai dengan Bekas Induknya?

Cara Mengskalakan Elemen SVG Sebaris

Dalam senario tertentu, pembangun mungkin perlu menskalakan imej SVG sebaris secara dinamik untuk memadankan saiz bekas induknya. Ini boleh dicapai tanpa merujuk fail SVG luaran dan membenarkan penggunaan gaya CSS tambahan pada kandungan SVG.

Untuk menskala SVG sebaris, gunakan langkah berikut:

1. Nyatakan Atribut Kotak Pandangan:
   Tentukan kotak sempadan imej dalam koordinatnya sistem menggunakan atribut ViewBox pada elemen SVG. Nilai mewakili koordinat x dan y penjuru kiri atas dan sudut kanan bawah SVG.
2. Tetapkan Atribut Lebar dan Tinggi:
   Nyatakan lebar dan tinggi daripada SVG kerana ia sepatutnya muncul dalam halaman yang mengandungi menggunakan atribut lebar dan ketinggian. Nilai ini menentukan cara SVG berskala secara berkadar.

Sebagai contoh, kod berikut akan menghasilkan segi tiga dalam kotak sempadan 10px kali 20px, yang kemudiannya akan diskalakan agar sesuai dengan bekas induknya:

svg {
  border: 1px solid blue;
}

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

Dengan menentukan koordinat dalam SVG secara bebas daripada saiz berskalanya, imej akan mengekalkan perkadarannya dan render dengan betul tanpa mengira saiz bekasnya.

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