Bagaimana untuk Mengubah Saiz Elemen SVG Secara Dinamik agar Sesuai dengan Bekas Induknya?

Memperluas/Mengontrak Elemen SVG agar Sesuai dengan Bekas Induk

Dalam pembangunan web, melaraskan saiz elemen SVG secara dinamik agar sepadan dengan bekas induknya ialah satu keperluan bersama. Walau bagaimanapun, menetapkan atribut ViewBox, walaupun biasa dicadangkan, boleh menimbulkan masalah apabila elemen dalam SVG mempunyai dimensi tetap.

Untuk menangani perkara ini, pertimbangkan untuk bekerja dengan SVG itu sendiri dan bukannya memanipulasi elemen di dalamnya. Begini caranya:

1. Buat ViewBox Anda: Tentukan atribut ViewBox elemen SVG, nyatakan lebar dan tinggi yang diingini (cth., "viewBox='0 100 100'" ). Ini menetapkan saiz kawasan tontonan, berasingan daripada dimensi sebenar SVG.
2. Hadkan Dimensi Elemen kepada Peratusan: Pastikan mana-mana elemen dalam SVG menggunakan peratusan untuk lebar dan ketinggiannya dan bukannya dimensi tetap. Contohnya, segi empat tepat dengan dimensi "width='10%'" dan "height='20%'" secara automatik akan mengubah saiz secara berkadar dengan kotak pandangan SVG.
3. Kaedah Ubah Saiz: Untuk mempunyai SVG kembangkan atau kontrak agar sesuai dengan bekas induk, tambah CSS pada elemen SVG dan bekas, tetapkan kedua-duanya mempunyai ketinggian dan lebar 100%. Ini memastikan bahawa SVG memenuhi seluruh bekas, mematuhi peratusan dan dimensi kotak paparan.

Sebagai alternatif, anda boleh menggunakan pembenaman imej dengan "width='100%'" dan "height='auto '" gaya untuk menskalakan SVG secara automatik secara berkadar dengan ruang yang tersedia.

Inkscape, editor SVG yang popular, tidak menawarkan pilihan global untuk menetapkan semua elemen kepada dimensi berasaskan peratusan. Walau bagaimanapun, anda boleh menukar dimensi elemen individu kepada peratusan secara manual menggunakan pilihan "Panel Transformasi x%".

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Saiz Elemen SVG Secara Dinamik agar Sesuai dengan Bekas Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!