SVG <polygon>
SVG Polygon - <polygon>
Prvek <polygon> se používá k vytvoření grafiky, která obsahuje alespoň tři strany.
Polygony jsou tvořeny rovnými čarami a tvar je "uzavřený" (všechny čáry se spojují).
Polygon pochází z řečtiny. "Poly" znamená "mnoho" a "gon" znamená "úhel".
Příklad 1
Následující příklad vytvoří mnohoúhelník se třemi stranami:
Zde je kód SVG:
Příklad
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Vysvětlení kódu:
- Atribut bodů definuje souřadnice x a y pro každý roh polygonu
Příklad 2
Následující příklad vytvoří mnohoúhelník se čtyřmi stranami:
Zde je kód SVG:
Příklad
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Příklad 3
K vytvoření hvězdy použijte prvek <polygon>:
Zde je kód SVG:
Příklad
<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>
Příklad 4
Změňte vlastnost fill-rule na "evenodd":
Zde je kód SVG:
Příklad
<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>