SVG Path KomutlarıTaşıma, Yatay, Dikey, Çizgi, Kapatma

M, Move (taşı) anlamına gelir ve çizime başlayacağımız noktayı belirtir. Şu anda Move değeri 150, 150 olarak ayarlanmıştır. İlk sayı x, ikinci sayı y eksenini belirtir. Değişiklikleri görmek için değerlerle oynayabilirsiniz.

<svg viewbox="0 0 300 300">
  <path d="M 150,150" />
</svg>

H, Horizontal (yatay) anlamına gelir ve 200 ile verilen x koordinatına yatay bir çizgi çizer. Aşağıdaki örnekte noktaları hareket ettirerek değişiklikleri gözlemleyin.

<svg viewbox="0 0 300 300">
  <path d="M 100,150 H 200" />
</svg>

V, Vertical (dikey) anlamına gelir ve 200 ile verilen y koordinatına dikey bir çizgi çizer. Aşağıdaki örnekte noktaları hareket ettirerek değişiklikleri gözlemleyin.

<svg viewbox="0 0 300 300">
  <path d="M 150,100 V 200" />
</svg>

L, Line (çizgi) anlamına gelir; mevcut konumdan belirtilen konuma bir çizgi çizer. Şu anda Line değeri 150, 200 olarak ayarlanmıştır. Yeni işaretçimiz çizginin sonunda bulunur. İlk sayı x, ikinci sayı y eksenini belirtir. Değişiklikleri görmek için değerlerle oynayabilirsiniz.

<svg viewbox="0 0 300 300">
  <path d="M 100,100 L 150,200" />
</svg>

Son komutumuz L olduğu için komutu yeniden yazmadan yeni koordinatları girerek çizgi çizmeye devam edebiliriz. Çizginin gideceği sonraki nokta 200, 100 olacak.

<svg viewbox="0 0 300 300">
  <path d="M 100,100 L 150,200 200,100" />
</svg>

Z, çizdiğimiz yolun başlangıç noktasına geri dönen bir çizgi çizmek için kullandığımız komuttur. Buna Yolu kapat denir.

<svg viewbox="0 0 300 300">
  <path d="M 100,100 L 150,200 200,100 Z" />
</svg>

@aykutkardas