SVG Polygon - <polygon>
The <polygon> elemen digunakan untuk membuat grafis yang mengandung setidaknya tiga sisi.
Poligon terbuat dari garis-garis lurus, dan bentuk yang "closed" (semua lini menghubungkan).
Polygon berasal dari bahasa Yunani. "Poly" berarti "many" dan "gon" berarti "angle" .
contoh 1
Contoh berikut membuat poligon dengan tiga sisi:
Berikut adalah kode SVG:
Contoh
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Cobalah sendiri " Code explanation:
- The points atribut mendefinisikan x dan y koordinat untuk setiap sudut poligon
contoh 2
Contoh berikut membuat poligon dengan empat sisi:
Berikut adalah kode SVG:
Contoh
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Cobalah sendiri " contoh 3
Gunakan <polygon> elemen untuk membuat sebuah bintang:
Berikut adalah kode SVG:
Contoh
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
Cobalah sendiri " contoh 4
Mengubah properti mengisi-aturan untuk "evenodd" :
Berikut adalah kode SVG:
Contoh
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Cobalah sendiri "