SVG <polygoon>
SVG-polygoon - <polygoon>
Het element <polygon> wordt gebruikt om een afbeelding te maken die ten minste drie zijden bevat.
Veelhoeken zijn gemaakt van rechte lijnen en de vorm is "gesloten" (alle lijnen sluiten op elkaar aan).
Veelhoek komt uit het Grieks. "Poly" betekent "veel" en "gon" betekent "hoek".
voorbeeld 1
In het volgende voorbeeld wordt een polygoon met drie zijden gemaakt:
Hier is de SVG-code:
Voorbeeld
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Code uitleg:
- Het puntenattribuut definieert de x- en y-coördinaten voor elke hoek van de veelhoek
Voorbeeld 2
In het volgende voorbeeld wordt een veelhoek met vier zijden gemaakt:
Hier is de SVG-code:
Voorbeeld
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Voorbeeld 3
Gebruik het element <polygon> om een ster te maken:
Hier is de SVG-code:
Voorbeeld
<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>
Voorbeeld 4
Wijzig de eigenschap fill-rule in "evenodd":
Hier is de SVG-code:
Voorbeeld
<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>