SVG <polygon>

SVG Poligon - <polygon>

<polygon> Elemen untuk mencipta grafik yang mempunyai setidaknya tiga sisi.

Poligon terdiri daripada garis dan bentuknya adalah "tertutup" (semua garis terhubung).

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

Contoh 1

Di bawah ini adalah contoh untuk mencipta poligon yang mempunyai tiga sisi:

Ini adalah kod SVG:

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

Cuba sendiri

Pengertian Kod:

• Atribut points menentukan koordinat x dan y setiap sudut poligon

Contoh 2

Di bawah ini adalah contoh untuk mencipta poligon yang mempunyai empat sisi:

Ini adalah kod 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>

Cuba sendiri

Contoh 3

gunakan <polygon> Elemen untuk mencipta bintang:

Ini adalah kod 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>

Cuba sendiri

Contoh 4

Tukar atribut fill-rule kepada "evenodd":

Ini adalah kod 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>

Cuba sendiri