Apakah ada konsep ukuran dalam SVG?


11

Saya bertanya-tanya tentang file SVG. Saya tahu ini adalah kumpulan vektor yang ditentukan oleh tag path dalam XML, jadi mengapa ia memiliki lebar dan tinggi dalam piksel dalam tag svg dan bagaimana jika kita menghapus dimensi tersebut?

Jawaban:


15

Lebar dan tinggi hanya relevan ketika viewBoxdiatur. Tanpa atribut itu, Anda dapat dengan aman menghapus lebar dan tinggi. Itu akan selalu ditampilkan pada skala yang digambar. Jika a <rect>diatur 10px lebar 20px tinggi itu akan ditampilkan pada skala itu 10x20 dengan atau tanpa lebar atau tinggi ketika tidak ada viewBox diatur.

Jika viewBoxatribut diatur, Anda dapat menggunakan lebar dan tinggi untuk menyesuaikan skala asli ke atas atau ke bawah.

Tanpa lebar dan tinggi tetapi setBox tampilan, ini akan memungkinkan svg untuk skala secara tak terbatas, yang mungkin atau mungkin tidak diinginkan perilaku. Dalam halaman HTML responsif ini sering diinginkan. Ini akan naik atau turun agar sesuai dengan wadah pembatas.

Ini sama saja

<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">

Ini menggandakan skala aslinya.

<svg viewBox="0 0 120 120" width="240" height="240" 
xmlns="http://www.w3.org/2000/svg">

Ini memungkinkan penskalaan tak terbatas

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.