Bagaimana cara membuat elemen <svg> meluas atau berkontraksi ke penampung induknya?

Tujuannya adalah agar <svg>elemen diperluas ke ukuran wadah induknya, dalam hal ini a <div>, tidak peduli seberapa besar atau kecil wadah itu.

Kode:

<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="100" height="100" />
    </svg>
</div>

Solusi paling umum untuk masalah ini tampaknya mengatur viewBoxatribut pada <svg>elemen.

viewBox="0 0 widthOfContainer heightOfContainer"

Namun, ini tampaknya tidak berfungsi dalam kasus di mana elemen dalam <svg>elemen memiliki lebar dan / atau tinggi yang telah ditentukan sebelumnya. Misalnya, <rect>elemen, dalam kode di atas, memiliki lebar dan tinggi yang ditetapkan secara eksplisit.

Jadi solusi yang jelas adalah dengan menggunakan% lebar dan% tinggi pada elemen tersebut juga. Tetapi apakah ini harus dilakukan? Terutama, karena <img src=test.svg >berfungsi dengan baik dan mengembang / berkontraksi tanpa masalah dengan <rect>ketinggian dan lebar yang ditetapkan secara eksplisit .

Jika elemen seperti <rect>, dan elemen lain seperti itu, harus memiliki lebar dan tinggi yang ditentukan dalam persentase, apakah ada cara di Inkscape untuk mengaturnya sehingga semua elemen dengan <svg>dokumen menggunakan persentase lebar, tinggi, dll .. daripada dimensi tetap ?

Itu viewBoxbukanlah tinggi wadah, itu ukuran gambar Anda. Tentukan viewBoxlebar Anda menjadi 100 unit, lalu tentukan Anda rectmenjadi 10 unit. Setelah itu, seberapa besar skala SVG Anda, rectakan menjadi 10% lebar gambar.

Misalkan saya memiliki SVG yang terlihat seperti ini:

Dan saya ingin memasukkannya ke dalam div dan membuatnya mengisi div secara responsif. Cara saya melakukannya adalah sebagai berikut:

Pertama saya membuka file SVG di aplikasi seperti inkscape. Di File-> Document Properties saya mengatur lebar dokumen menjadi 800px dan tinggi menjadi 600px (Anda dapat memilih ukuran lain). Kemudian saya memasukkan SVG ke dalam dokumen ini.

Kemudian saya menyimpan file ini sebagai file SVG baru dan mendapatkan data jalur dari file ini. Sekarang dalam HTML kode yang melakukan keajaiban adalah sebagai berikut:

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

Perhatikan bahwa lebar dan tinggi SVG keduanya disetel ke 100%, karena kami ingin mengisi wadah secara vertikal dan horizontal, tetapi lebar dan tinggi dari viewBox sama dengan lebar dan tinggi dokumen dalam inkscape yaitu 800px X 600px. Hal berikutnya yang perlu Anda lakukan adalah menyetel preservAspectRatio ke "tidak ada". Jika Anda memerlukan informasi lebih lanjut tentang atribut ini, berikut adalah tautan yang bagus . Dan hanya itu saja.

Satu hal lagi adalah kode ini berfungsi di hampir semua browser utama bahkan yang lama, tetapi pada beberapa versi android dan ios Anda perlu menggunakan beberapa kode javascrip / jQuery agar tetap konsisten. Saya menggunakan yang berikut ini dalam fungsi siap dan ubah ukuran dokumen:

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

Semoga membantu!

Apa yang berhasil bagi saya baru-baru ini adalah menghapus semua height=""dan width=""atribut dari <svg>tag dan semua tag anak. Kemudian Anda dapat menggunakan penskalaan menggunakan persentase dari tinggi atau lebar wadah induk.

@robertc benar, tetapi Anda juga perlu memperhatikan bahwa svg, #containermenyebabkan svg diskalakan secara eksponensial untuk apa pun kecuali 100% (sekali untuk #containerdan sekali untuk svg).

Dengan kata lain, jika saya menerapkan 50% h / w ke kedua elemen, sebenarnya itu adalah 50% dari 50%, atau 0,5 * .5, yang sama dengan skala 0,25, atau 25%.

Satu pemilih berfungsi dengan baik saat digunakan seperti yang disarankan @robertc.

svg {
  width:50%;
  height:50%;
}

Untuk iPhone Anda, Anda dapat menggunakan di head balise Anda:

"width=device-width"