Temel SVG Şekilleri: rect circle path

SVG, (0,0) noktasının sol üst köşe olduğu bir koordinat sistemi kullanır. X sağa doğru, Y aşağı doğru artar. Görünüm alanı genişlik ve yükseklik öznitelikleriyle, koordinat uzayı ise viewBox özniteliğiyle tanımlanır.

Dikdörtgenleri <rect x="10" y="10" width="200" height="100" rx="8" ry="8"> ile çizin. rx ve ry köşeleri yuvarlar. Dolgu ve kontur, dolgu ve kontur öznitelikleri veya CSS ile denetlenir. x ve y belirtilmezse varsayılan değer 0,0 olur.

Çemberleri <circle cx="100" cy="100" r="50"> ile çizin. cx ve cy merkez koordinatlarıdır; r yarıçaptır. SVG çemberlerinde canvas yayının açı parametrelerine eşdeğer bir seçenek yoktur; çemberler her zaman tam çemberdir.

Elipsleri <ellipse cx="100" cy="100" rx="80" ry="40"> ile çizin. rx yatay yarıçaptır; ry dikey yarıçaptır. rx ve ry değerleri eşit olan bir elips, çembere eşdeğerdir.

<line x1="0" y1="0" x2="100" y2="100"> tek bir doğru parçası çizer. <polyline points="0,0 100,50 200,0"> bir dizi koordinat çifti üzerinden birbirine bağlı doğru parçaları çizer. İkisi de otomatik olarak kapatılmaz.

<polygon points="100,10 190,190 10,190">, çoklu doğruya benzer; ancak şekil otomatik olarak kapatılır ve son noktayı ilk noktaya bağlayan bir çizgi eklenir. Üçgen, yıldız ve diğer düzgün çokgenler gibi kapalı şekiller için çokgen kullanın.

Yol, en güçlü SVG şeklidir; doğru, yay ve eğrilerin herhangi bir birleşimini temsil edebilir. d özniteliği yol komutlarını içerir: M (moveTo), L (lineTo), A (yay), C (kübik Bézier), Q (kuadratik Bézier), Z (closePath).

Büyük harfli komutlar mutlak koordinatları, küçük harfli komutlar göreli koordinatları kullanır. M 100 50, (100,50) konumuna gider. L 200 150, (200,150) konumuna bir doğru çizer. Z yolu kapatır. A rx ry rotation large-arc sweep x y bir yay çizer.

SVG şekilleri CSS özelliklerini kabul eder: fill, stroke, stroke-width, opacity ve stroke-dasharray. Bakımı kolay bir biçimlendirme için SVG öğelerinde CSS sınıflarını kullanın. SVG CSS geçişleri, yumuşak durum değişiklikleri için dolgu, kontur ve opaklık üzerinde çalışır.

<g> öğesi, SVG öğelerini gruplar. Tüm alt öğeleri etkilemek için dönüşümü, dolguyu veya konturu gruba uygulayın. Gruplama, saat kadranı ve tüm bileşenleri gibi birlikte hareket eden veya dönüşen karmaşık şekillerin birleştirilmesini sağlar.

Yeniden kullanılabilir şekilleri <defs> içinde tanımlayın: simgeler, renk geçişleri ve kırpma yolları. Bunlara <use href="#id"> ile başvurun. Böylece karmaşık yol verilerinin yinelenmesi önlenir ve kullanım öğesi aracılığıyla örnek düzeyinde dönüşümler ve biçimlendirme yapılabilir.

SVG'de çoklu doğru ile çokgen arasındaki fark nedir?

SVG, bildirimsel şekil öğeleri (dikdörtgen, çember, elips, doğru, çoklu doğru, çokgen) ve karmaşık şekiller için M, L, A, C, Q, Z komutlarını kullanan çok yönlü bir yol öğesi sunar. CSS ile biçimlendirme, g ile gruplama ve tanımlar ile kullanım yoluyla yeniden kullanım, doğrudan HTML içine gömülen, bakımı kolay ve ölçeklenebilir vektör grafiklerini mümkün kılar.