SVG <polygon>

SVG Polygon - <polygon>

<polygon> Das Element wird verwendet, um ein Diagramm mit mindestens drei Seiten zu erstellen.

Polygone bestehen aus Linien und sind "geschlossen" (alle Linien sind verbunden).

Das Wort Polygon stammt aus dem Griechischen. "Poly" bedeutet "viele", "gon" bedeutet "Winkel".

Beispiel 1

Das folgende Beispiel erstellt ein Dreieck:

Dies ist SVG-Code:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Selbst ausprobieren

Code-Explainierung:

• Die Eigenschaft points definiert die x- und y-Koordinaten jeder Ecke des Polygons

Beispiel 2

Das folgende Beispiel erstellt ein Viereck:

Dies ist SVG-Code:

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Selbst ausprobieren

Beispiel 3

Verwenden Sie <polygon> Erstellen Sie ein Sternsymbol mit dem Element:

Dies ist SVG-Code:

<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>

Selbst ausprobieren

Beispiel 4

Ändern Sie das Attribut fill-rule in "evenodd":

Dies ist SVG-Code:

<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>

Selbst ausprobieren