SVG <wielokąt>
Wielokąt SVG — <wielokąt>
Element <polygon> służy do tworzenia grafiki zawierającej co najmniej trzy boki.
Wielokąty składają się z linii prostych, a kształt jest „zamknięty” (wszystkie linie łączą się).
Wielokąt pochodzi z języka greckiego. „Poly” oznacza „wiele”, a „gon” oznacza „kąt”.
Przykład 1
Poniższy przykład tworzy wielokąt z trzema bokami:
Oto kod SVG:
Przykład
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Wyjaśnienie kodu:
- Atrybut points określa współrzędne x i y dla każdego rogu wielokąta
Przykład 2
Poniższy przykład tworzy wielokąt z czterema bokami:
Oto kod SVG:
Przykład
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Przykład 3
Użyj elementu <wielokąt>, aby stworzyć gwiazdę:
Oto kod SVG:
Przykład
<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>
Przykład 4
Zmień właściwość fill-rule na „evenodd”:
Oto kod SVG:
Przykład
<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>