SVG Path Komutları

Bir SVG'deki her şekil, küçük bir ikondan koca bir logoya kadar, tek bir elemanla çizilebilir: path. Onun d özelliği, bir kalem için kısa bir talimat listesidir: buraya git, şuraya bir çizgi çek, şu noktaya eğriyle ulaş. Her talimat bir harf ve ardından gelen sayılardan oluşur. Bu harfleri okumayı öğrendiğinizde path verisi anlamsız karakterler gibi görünmekten çıkar.

Önce şunu soralım: "Burası" neresi? Bir nokta iki sayıdır: x, soldan ne kadar uzakta olduğu; y, yukarıdan ne kadar uzakta olduğu. Matematik dersindeki grafiklerin aksine y aşağı doğru büyür. İlk komut olan M (Move, taşı), hiçbir şey çizmeden kalemi bir noktaya koyar. Kalemi sürükleyin ve sayıları izleyin.

<path d="M 100,200" />

Şimdi çizelim. L (Line, çizgi), kalemin bulunduğu yerden yeni bir noktaya düz bir çizgi çeker. H (Horizontal, yatay) ve V (Vertical, dikey) birer kısayoldur: Yalnızca tek bir sayı alırlar, çünkü diğeri aynı kalır. Z ise şekli, başladığı yere geri dönen düz bir çizgiyle kapatır.

İki kural daha path'leri kısaltır. Bir komut tekrarlanıyorsa harfini atlayıp sayıları yazmaya devam edebilirsiniz. M'den sonra gelen fazladan sayılar L çizgisi sayılır. Yeni bir M ise kalemi kaldırır ve aynı path içinde yeni bir parça başlatır. Aşağıdaki evi adım adım çizin ve her adımdan önce kalemin nereye gideceğini tahmin etmeye çalışın.

<path d="M 70,240 V 140 H 230 V 240 Z M 70,140 L 150,70 230,140" />

Her komutun bir de küçük harfli sürümü vardır. Büyük harf, ızgara üzerindeki bir konum demektir: "x = 230'a git". Küçük harf ise kalemin şu anki yerinden atılan bir adım demektir: "160 sağa git". Negatif sayılar sola ya da yukarı doğru adım atar. Aşağıdaki ev iki şekilde de aynı görünür, ta ki onu taşıyana kadar.

<path d="M 70,240 V 140 H 230 V 240 Z M 70,140 L 150,70 230,140" />

Bu yüzden küçük harfler, yerini değiştirmek istediğiniz şekiller için kullanışlıdır: Şeklin nerede olduğunu yalnızca ilk nokta söyler, diğer her nokta bir öncekinden atılan bir adımdır.

Düz çizgilerle ancak bir yere kadar gidebilirsiniz. C (Curve, eğri) üç nokta alır: iki tutamaç ve bir bitiş noktası. Eğri tutamaçların üzerinden geçmez. Başlangıçtan birinci tutamaca doğru yola çıkar ve bitişe ikincisinin yönünden gelerek varır, sanki tutamaçlar onu çekiyormuş gibi. Bir tutamaç ne kadar uzaktaysa eğri onu o kadar uzun süre izler.

<path d="M 50,230 C 80,60 240,60 250,230" />

Aynı fikir üzerine kurulu birkaç komut daha var. S bir C eğrisini yumuşakça sürdürür, Q tek tutamaçlı daha basit bir eğridir, T bir Q eğrisini sürdürür, A ise bir yay, yani bir elipsin parçasını çizer. Hepsinin küçük harfli sürümleri de vardır. C eğrilerini iş başında görmek isterseniz SVG ile Yapışkan Şekiller yazısı onlarla yapışkan bir efekt kuruyor.

Şimdi sıra sizde. Bir şekil seçin ya da kendi komutlarınızı yazın ve çizilişini izleyin.

Yani bir path, sadece bir kalem ve bir hareket listesidir. M kalemi koyar; L, H ve V düz çizgiler çeker; C eğri çizer; Z de şekli kapatır. Büyük harfler ızgaradaki konumlara gider, küçük harfler kalemden adım atar. Bir dahaki sefere bir SVG ikonu açıp uzun bir d özelliği gördüğünüzde onu da aynı şekilde, harf harf okuyun.

@aykutkardas

—

0/50 alkış