SVG'de herhangi bir boyut kavramı var mı?


11

SVG dosyalarını merak ediyordum. XML yol etiketleri tarafından tanımlanan vektörlerin bir koleksiyon olduğunu biliyorum, bu yüzden neden svg etiketi piksel genişlik ve yükseklik var ve biz bu boyutları kaldırıldı?

Yanıtlar:


15

Genişlik ve yükseklik yalnızca viewBoxayarlandığında geçerlidir. Bu özellik olmadan genişliği ve yüksekliği güvenle silebilirsiniz. Her zaman çizildiği ölçekte görüntülenir. A 10 <rect>piksel genişliğinde 20 piksel yüksekliğe ayarlanırsa, viewBox ayarlanmadığında genişlik veya yükseklikle veya genişlik olmadan bu ölçekte 10x20 olarak görüntülenir.

Bir viewBoxöznitelik ayarlanmışsa, orijinal ölçeği yukarı veya aşağı ayarlamak için genişlik ve yüksekliği kullanabilirsiniz.

Genişlik ve yükseklik olmadan ancak viewBox ayarlandığında, bu svg'nin istediğiniz şekilde davranması veya istenmemesini istediğiniz şekilde ölçeklendirilmesini sağlar. Duyarlı bir HTML sayfasında bu genellikle istenir. Sınırlama kabına sığacak şekilde yukarı veya aşağı ölçeklenir.

Bunlar aynı

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

Bu orijinal ölçeği iki katına çıkarır.

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

Bu sonsuz ölçeklendirmeye izin verir

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.