SVG <jalan>
Jalur SVG - <jalur>
Elemen <path> digunakan untuk mendefinisikan path.
Perintah berikut tersedia untuk data jalur:
- M = pindah ke
- L = garis
- H = garis mendatar ke
- V = garis vertikal ke
- C = kurva ke
- S = kurva halus ke
- Q = kurva Bezier kuadrat
- T = kurva Bezier kuadrat halus ke
- A = Busur elips
- Z = jalur dekat
Catatan: Semua perintah di atas juga dapat dinyatakan dengan huruf kecil. Huruf kapital berarti benar-benar diposisikan, huruf kecil berarti relatif diposisikan.
Contoh 1
Contoh di bawah ini mendefinisikan jalur yang dimulai pada posisi 150,0 dengan garis ke posisi 75.200 lalu dari sana, garis ke 225.200 dan akhirnya menutup jalur kembali ke 150,0:
Berikut adalah kode SVG:
Contoh
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Contoh 2
Kurva Bézier digunakan untuk memodelkan kurva mulus yang dapat diskalakan tanpa batas. Umumnya, pengguna memilih dua titik akhir dan satu atau dua titik kontrol. Kurva Bézier dengan satu titik kontrol disebut kurva Bézier kuadrat dan jenis dengan dua titik kontrol disebut kubik.
Contoh berikut membuat kurva Bézier kuadrat, di mana A dan C adalah titik awal dan akhir, B adalah titik kontrol:
Berikut adalah kode SVG:
Contoh
<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>
Kompleks? YA!!!! Karena kerumitan yang terlibat dalam menggambar jalur, sangat disarankan untuk menggunakan editor SVG untuk membuat grafik yang kompleks.