SVG <polygon>

SVG wielokąt - <polygon>

<polygon> Element używany do tworzenia grafiki zawierającej co najmniej trzy boki.

Wielokąty są zbudowane z prostych linii i mają kształt "zamknięty" (wszystkie linie są połączone).

Słowo "Polygon" pochodzi z greckiego. "Poly" oznacza "wiele", a "gon" oznacza "kąt".

Przykład 1

Poniższy przykład tworzy wielokąt o trzech bokach:

To jest kod SVG:

<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

Wyjaśnienie kodu:

• Atrybut points definiuje współrzędne x i y kątów wielokąta

Przykład 2

Poniższy przykład tworzy wielokąt o czterech bokach:

To jest kod SVG:

<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> Element tworzy gwiazdę:

To jest kod SVG:

<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ń atrybut fill-rule na "evenodd":

To jest kod SVG:

<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