SVG <polygon>

SVG Poligon - <polygon>

<polygon> Elemen digunakan untuk membuat grafik yang terdiri dari setidaknya tiga sisi.

Poligon terdiri dari garis yang membentuk bentuk yang "tertutup" (semua garis terhubung).

Kata Polygon berasal dari bahasa Yunani. "Poly" berarti "banyak", "gon" berarti "sudut".

Contoh 1

Contoh berikut membuat poligon yang memiliki tiga sisi:

Ini adalah kode SVG:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Coba Sendiri

Penjelasan kode:

• Properti points menentukan koordinat x dan y setiap sudut poligon

Contoh 2

Contoh berikut membuat poligon yang memiliki empat sisi:

Ini adalah kode SVG:

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Coba Sendiri

Contoh 3

Gunakan <polygon> Membuat elemen bintang:

Ini adalah kode SVG:

<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>

Coba Sendiri

Contoh 4

Ubah properti fill-rule menjadi "evenodd":

Ini adalah kode SVG:

<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>

Coba Sendiri