SVG Polyline - <polyline>
Contoh 1
<polyline> elemen digunakan untuk menciptakan bentuk yang hanya terdiri dari garis lurus:
<svg width="500" height="210">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3";/>
</svg>
Contoh 2
Contoh lain dengan hanya garis lurus:
<svg width="500" height="210">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120"
style="fill:white;stroke:red;stroke-width:3";/>
</svg>
SVG <path>
<Path> elemen digunakan untuk mendefinisikan sebuah jalan.
Perintah berikut tersedia untuk jalur data:
- M = MoveTo
- L = LineTo
- H = LineTo horisontal
- V = LineTo vertikal
- C = curveto
- S = smooth curveto
- Q = kurva Bézier kuadrat
- T = smooth kuadrat Bezier curveto
- A = Arc elips
- Z = closepath
Catatan: Semua perintah di atas juga dapat dinyatakan dengan huruf yang lebih rendah. Huruf kapital berarti benar-benar diposisikan, kasus yang lebih rendah berarti relatif diposisikan.
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
contoh 2
Kurva Bezier digunakan untuk memodelkan 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 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:
<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" />
<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>
<g font-size="30" font="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>
0 komentar:
Posting Komentar