SVG <veelhoek>
SVG Veelhoek - <veelhoek>
Die <polygon>-element word gebruik om 'n grafika te skep wat ten minste drie kante bevat.
Veelhoeke word van reguit lyne gemaak, en die vorm is "geslote" (al die lyne sluit aan).
Veelhoek kom van Grieks. "Poly" beteken "baie" en "gon" beteken "hoek".
Voorbeeld 1
Die volgende voorbeeld skep 'n veelhoek met drie sye:
Hier is die SVG-kode:
Voorbeeld
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Kode verduideliking:
- Die punte-kenmerk definieer die x- en y-koördinate vir elke hoek van die veelhoek
Voorbeeld 2
Die volgende voorbeeld skep 'n veelhoek met vier sye:
Hier is die SVG-kode:
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 die <polygon> element om 'n ster te skep:
Hier is die SVG-kode:
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
Verander die vulreël-eienskap na "evenodd":
Hier is die SVG-kode:
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>