SVG Yolu - <path>
<path> elemanı bir yol tanımlamak için kullanılır.
Aşağıdaki komutlar yolu verilerine için kullanılabilir:
- M = MoveTo
- L = LineTo
- H = Yatay LineTo
- V = dikey LineTo
- C = curveTo
- S = düz curveTo
- Q = ikinci dereceden Bezier eğrisi
- T olarak düz dörtlü Bezier curveTo =
- A = eliptik Ark
- Z = closepath
Note: Yukarıdaki komutlar tümü aynı zamanda daha düşük harflerle ifade edilebilir. Büyük harfler kesinlikle alt vakalar nispeten yerleştirilmiş olması, konumlandırılmış demektir.
Örnek 1
Aşağıdaki örnek, bir çizgi, oradan son olarak 150,0 geri yolunu kapatarak 225,200 ve daha sonra 75,200 konumlandırmak için bir hat ile konumunda 150,0 başlar bir yolu tanımlar:
İşte SVG kodu:
Örnek 2
Bezier eğrileri süresiz ölçeklendirilebilir düzgün eğriler modellemek için kullanılır. Genel olarak, kullanıcı, iki uç noktaları bir ya da iki kontrol noktası seçer. bir kontrol noktası olan Bezier eğrisi ikinci dereceden bir Bezier eğrisi olarak da anılır ve iki kontrol noktalarıyla tür küp olarak adlandırılır.
Aşağıdaki örnek, A ve C, başlangıç ve bitiş noktaları, bir ikinci dereceden Bezier eğrisi oluşturur, B kontrol noktasıdır:
İşte SVG kodu:
Örnek
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Kendin dene " Kompleks? EVET!!!! Çünkü çekme yolları dahil karmaşıklık son derece karmaşık grafik oluşturmak için bir SVG düzenleyicisi kullanılması tavsiye edilir.