SVG-Polygon
Beschreibung des <polygon>-Elements
Das SVG <polygon>-Element erstellt eine Grafik mit mindestens drei Seiten.
Polygone bestehen aus geraden Linien, die miteinander verbunden sind, und ihre Form ist „geschlossen“.
Beispiel für das SVG <polygon>-Element mit drei Seiten:
Beispiel für das SVG <polygon>-Element mit drei Seiten
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>In diesem Beispiel gibt das points-Attribut die x- und y-Koordinaten für jede Ecke unseres Polygons an.
Beispiel für das SVG <polygon>-Element mit vier Seiten:
Beispiel für das SVG <polygon>-Element mit vier Seiten:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Beispiel für das SVG <polygon>-Element zum Erstellen eines Sterns:
Beispiel für das SVG <polygon>-Element zum Erstellen eines Sterns:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Attribute
| Attribut | Beschreibung |
|---|---|
| points | Dieses Attribut gibt die Liste der Punkte (Paare aus absoluten x,y-Koordinaten) an, die zum Zeichnen des Polygons erforderlich sind. |
| pathLength | Dieses Attribut gibt die Gesamtlänge des Pfads in Benutzereinheiten an. |
Das SVG <polygon>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.
Praxis
Was ist laut dem Inhalt der bereitgestellten URL über SVG-Polygone wahr?