Blog · SVG temelleri
SVG viewBox bir tuval boyutu değil, koordinat eşlemesidir.
Görüntü alanı boyutları, kullanıcı birimleri, en-boy oranı, iç içe dönüşümler ve duyarlı SVG ölçülendirme için güvenilir bir zihinsel model.
Önce görüntü alanıyla kullanıcı uzayını ayırın.
Görüntü alanı, SVG’nin gösterildiği dikdörtgen bölgedir. Web sayfasındaki boyutu width ve height niteliklerinden, CSS yerleşiminden, bir img öğesinden veya kapsayıcı bileşenin ölçülerinden gelebilir. Kullanıcı uzayı ise bu bölgenin içindeki şekillerin kullandığı koordinat sistemidir. İlk SVG koordinat sisteminde başlangıç normalde sol üsttedir; x sağa, y aşağı doğru artar.
Bu iki dikdörtgenin aynı sayıları kullanması gerekmez. Bir SVG, 640 × 360 CSS pikseli kaplarken çizimi yatayda 0–1600, dikeyde 0–900 kullanıcı uzayında tanımlanabilir. Görüntüleme sırasında bir koordinat sistemi diğerine eşlenir; gösterim boyutu değiştiğinde geometrinin yeniden yazılması gerekmez.
- Görüntü alanı: ekranda ayrılan dikdörtgen
- Kullanıcı uzayı: geometrinin kullandığı koordinatlar
- Eşleme: bu iki uzay arasındaki dönüşüm
viewBox değerlerini görevleri farklı dört sayı olarak okuyun.
Bir viewBox; min-x, min-y, genişlik ve yükseklik değerlerinden oluşur. İlk ikili, görüntü alanından bakıldığında görülecek kullanıcı uzayı başlangıcını; ikinci ikili ise görünür kullanıcı uzayı dikdörtgeninin boyutunu belirler. Dolayısıyla 100 50 400 200 değerli bir viewBox, x ekseninde 100–500 ve y ekseninde 50–250 aralığını gösterir.
min-x veya min-y değerini değiştirmek tek tek şekilleri taşımadan görünür bölgeyi kaydırır. viewBox genişliğini ya da yüksekliğini değiştirmek, bölgeyi görüntü alanına sığdırmak için gereken ölçeği değiştirir. Genişlik ve yükseklik pozitif olmalıdır: sıfır değer görüntülemeyi kapatır, negatif değer niteliği geçersiz kılar.
preserveAspectRatio, oranları farklı iki dikdörtgenin nasıl eşleşeceğini belirler.
Varsayılan davranış xMidYMid meet değeridir. Ölçek iki eksende aynı kalır, viewBox’ın tamamı görünür ve artan boşluk ortalanmış çizimin çevresine paylaştırılır. Bu davranış, bir görselin tamamını çerçevenin içine sığdırmaya benzer. xMin, xMid ve xMax yatay; YMin, YMid ve YMax dikey hizalamayı belirler.
slice seçeneği oranı koruyarak görüntü alanının tamamını doldurur; bu nedenle viewBox’ın bir bölümü görünür alanın dışında kalabilir. none seçeneği yatay ve dikey eksenlerde farklı ölçeklere izin verir; daireleri, konturları ve harf biçimlerini bozabilir. Yalnızca orantısız esnetme bilinçli bir karar olduğunda kullanılmalıdır.
- meet: viewBox’ın tamamını gösterir, boşluğa izin verir
- slice: görüntü alanını doldurur, kırpılmaya izin verir
- none: iki boyutu doldurur, biçim bozulmasına izin verir
Dönüşümler yerel koordinat sistemleri oluşturur.
Her dönüşüm, öğenin ve alt öğelerinin gördüğü koordinat sistemini değiştirir. Ötelenmiş bir grup, belgede başka yerde görünmesine rağmen kendi içinde basit yerel koordinatlar kullanabilir. Matris çarpımı değişmeli olmadığı için dönüşüm sırası önemlidir: önce öteleyip sonra döndürmek çoğu durumda önce döndürüp sonra ötelemekle aynı sonucu vermez.
İç içe svg öğeleri yeni görüntü alanları kurar ve üst kullanıcı uzayının içinde yeni bir viewBox eşlemesi başlatabilir. Semboller, işaretçiler, desenler, gradyanlar, kırpma yolları ve maskeler de kullanıcı uzayına ya da nesne sınır kutusuna bağlı koordinat sistemleri kullanabilir. Yeniden kullanılan bir varlık beklenmedik biçimde kayıyor veya ölçekleniyorsa sayıları değiştirmeden önce her kaynağın hangi koordinat sistemini kullandığını belirleyin.
Duyarlı boyut, her görsel özelliğin aynı şekilde ölçekleneceği anlamına gelmez.
viewBox doğal bir en-boy oranı sağlar; son gösterim genişliğini ise CSS belirleyebilir. Yaygın bir duyarlı yerleşimde SVG’ye akışkan genişlik verilir ve yükseklik en-boy oranını izler. Sabit ölçüleri kaldırırken viewBox’ı da kaldırmak koordinat eşlemesini yok eder ve doğal boyutlandırmayı belirsizleştirebilir.
Normal konturlar geçerli dönüşümle birlikte ölçeklenir. non-scaling-stroke vektör etkisi geometri büyüyüp küçülürken kontur kalınlığını görsel olarak sabit tutabilir; yine de işaretçiler, filtreler, kesik dizileri ve etkileşim alanları ayrıca incelenmelidir. Yüzde değerleri de geçerli görüntü alanının veya sınır kutusunun tanımladığı ölçülere göre çözülür; kullanıcı birimi sayılarıyla birbirinin yerine kullanılamaz.
Geometriyi değiştirmeden önce eşlemeyi hata ayıklayın.
Bir SVG kırpılmış, esnemiş veya kaymış görünüyorsa önce görüntü alanı boyutunu, dört viewBox değerini ve preserveAspectRatio değerini yazın. Ardından en dış svg öğesinden sorunlu şekle kadar dönüşümleri inceleyin. Bu sıra, koordinat sistemi sorununu yol noktalarını kalıcı olarak taşıyarak telafi etmenizi önler.
viewBox sınırlarıyla aynı geçici bir dikdörtgen ve başlangıç noktasına bir işaret eklemek yararlı bir tanı yöntemidir. Dikdörtgen doğru yerleşiyor ama çizim yerleşmiyorsa sorun çizimin veya dönüşümlerinin içindedir. Dikdörtgen de yanlış yerleşiyorsa düzeltilmesi gereken yer görüntü alanı eşlemesidir.
- Görüntü alanı ölçülerini ve CSS kısıtlarını doğrulayın
- viewBox başlangıcını ve pozitif boyutlarını doğrulayın
- Yol koordinatlarından önce preserveAspectRatio değerini doğrulayın
- İç içe dönüşümleri üst öğeden alt öğeye doğru inceleyin