SVG <Polygon>
SVG Polygon - <Polygon>
Das Element <polygon> wird verwendet, um eine Grafik zu erstellen, die mindestens drei Seiten enthält.
Polygone bestehen aus geraden Linien und die Form ist "geschlossen" (alle Linien sind miteinander verbunden).
Vieleck kommt aus dem Griechischen. „Poly“ bedeutet „viele“ und „gon“ bedeutet „Winkel“.
Beispiel 1
Das folgende Beispiel erstellt ein Polygon mit drei Seiten:
Hier ist der SVG-Code:
Beispiel
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Code-Erklärung:
- Das Attribut points definiert die x- und y-Koordinaten für jede Ecke des Polygons
Beispiel 2
Das folgende Beispiel erstellt ein Polygon mit vier Seiten:
Hier ist der SVG-Code:
Beispiel
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Beispiel 3
Verwenden Sie das Element <polygon>, um einen Stern zu erstellen:
Hier ist der SVG-Code:
Beispiel
<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>
Beispiel 4
Ändern Sie die Eigenschaft der Füllregel in "evenodd":
Hier ist der SVG-Code:
Beispiel
<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>