SVG Polygon - <wielokąta>
<polygon> element jest stosowany do tworzenia grafiki, która zawiera co najmniej trzy boki.
Wielokąty są wykonane z prostych linii i kształtów jest "closed" (wszystkie linie podłączyć).
Polygon pochodzi z języka greckiego. "Poly" oznacza "many" i "gon" dochodowe "angle" .
Przykład 1
Poniższy przykład tworzy wielokąt z trzech stron:
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>
Spróbuj sam " Code explanation:
- points atrybut definiuje współrzędne X i Y dla każdego rogu wielokąta
Przykład 2
Poniższy przykład tworzy wielokąt o czterech bokach:
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>
Spróbuj sam " Przykład 3
Użyj <polygon> elementu 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>
Spróbuj sam " Przykład 4
Zmień właściwość wypełniający regułę do "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>
Spróbuj sam "