SVG <polygon>

SVG polygoon - <polygon>

<polygon> Het element wordt gebruikt om een figuur met ten minste drie zijden te maken.

Een polygoon bestaat uit lijnen en is van vorm "gesloten" (alle lijnen zijn verbonden).

Het woord "Polygon" komt van het Griekse. "Poly" betekent "veel", "gon" betekent "hoek".

Voorbeeld 1

Het volgende voorbeeld maakt een driehoek met drie zijden aan:

Dit is een SVG-code:

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

Probeer het zelf

Code-explikatie:

• De points-eigenschap definieert de x- en y-coördinaten van elke hoek van het polygoon

Voorbeeld 2

Het volgende voorbeeld maakt een vierkant met vier zijden aan:

Dit is een SVG-code:

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

Probeer het zelf

Voorbeeld 3

Gebruik <polygon> Element maakt een ster aan:

Dit is een SVG-code:

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

Probeer het zelf

Voorbeeld 4

Verander de fill-rule-eigenschap naar "evenodd":

Dit is een SVG-code:

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

Probeer het zelf