SVG Polygon - <Polygon>
Das <polygon> Element wird verwendet , um eine Grafik zu erstellen , die mit mindestens drei Seiten enthält.
Polygone werden von geraden Linien, und die Form ist "closed" (alle Leitungen anschließen).
Polygon kommt aus dem Griechischen. "Poly" bedeutet "many" und "gon" Mittel "angle" .
Beispiel 1
Das folgende Beispiel erzeugt 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>
Versuch es selber " Code explanation:
- Die points Attribut definiert die x und y - Koordinaten für jede Ecke des Polygons
Beispiel 2
Das folgende Beispiel erzeugt 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>
Versuch es selber " Beispiel 3
Verwenden Sie das <polygon> Element 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>
Versuch es selber " Beispiel 4
Ändern Sie die Fill-Regel - Eigenschaft auf "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>
Versuch es selber "