Bagaimana untuk Membuat Elemen SVG Berkembang dan Berkontrak dengan Bekas Induk Mereka?

Kembangkan dan Kontrakkan Elemen SVG kepada Bekas Induk

Cabarannya ialah untuk memastikan elemen SVG mengembang atau mengecut agar sepadan dengan dimensi bekas induknya, tanpa mengira saiz bekas.

Penyelesaian Biasa: viewBox

Penyelesaian popular melibatkan penetapan atribut ViewBox pada elemen SVG. Walau bagaimanapun, ini mungkin tidak berkesan apabila elemen anak dalam SVG mempunyai lebar atau ketinggian tetap.

Dimensi Elemen Berasaskan Peratusan

Pendekatan alternatif ialah menggunakan peratusan- berdasarkan lebar dan ketinggian untuk elemen dalam SVG. Ini mencerminkan gelagat SVG terbenam menggunakan , yang berkembang dan menguncup dengan lancar walaupun terdapat dimensi elemen tertentu.

Tetapan Peratusan Inkscape

Jika dimensi berasaskan peratusan lebih disukai, pertimbangkan untuk mengubah suai tetapan lalai Inkscape. Cari pilihan "Skala" dalam menu "Objek" dan dayakan "Skala mengikut: Peratusan". Ini memastikan semua elemen yang dibuat dalam SVG mempunyai dimensi berasaskan peratusan.

Kod Contoh dengan Dimensi Berdasarkan Peratusan

Berikut ialah contoh kod yang dikemas kini:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="10%" height="10%" />
    </svg>
</div>

Ini memastikan segi empat tepat dalam SVG mengembang dan mengecut secara berkadaran dengan dimensi bekas induknya.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Elemen SVG Berkembang dan Berkontrak dengan Bekas Induk Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!