SVG Path - <path>
The <path> elemen digunakan untuk mendefinisikan jalan.
Perintah berikut tersedia untuk data path:
- M = MoveTo
- L = LineTo
- H = LineTo horisontal
- V = LineTo vertikal
- C = curveto
- S = halus curveto
- Q = kurva Bezier kuadrat
- T = halus kuadrat Bezier curveto
- A = elips Arc
- Z = closepath
Note: Semua perintah di atas juga dapat dinyatakan dengan huruf yang lebih rendah. huruf berarti benar-benar diposisikan, kasus yang lebih rendah berarti relatif diposisikan.
contoh 1
Contoh di bawah ini mendefinisikan jalan yang dimulai pada posisi 150,0 dengan garis ke posisi 75.200 kemudian dari sana, garis untuk 225.200 dan akhirnya menutup jalan kembali ke 150,0:
Berikut adalah kode SVG:
Contoh
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Cobalah sendiri " contoh 2
kurva Bezier digunakan untuk model kurva halus yang dapat ditingkatkan tanpa batas. Umumnya, pengguna memilih dua endpoint dan satu atau dua titik kontrol. Kurva Bezier dengan satu titik kontrol disebut kurva Bezier kuadrat dan jenis dengan dua titik kontrol disebut kubik.
Contoh berikut membuat kurva Bezier 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>
Cobalah sendiri " Kompleks? IYA NIH!!!! Karena kompleksitas yang terlibat dalam jalur menggambar itu sangat dianjurkan untuk menggunakan editor SVG untuk membuat grafis kompleks.