SVG/Element/polygon

Das polygon-Element definiert ein Polygon (Vieleck). Es besitzt wie die Polylinie eine Punktemenge, die ein Objekt beschreibt. Bei einem Polygonzug wird jedoch der Startpunkt nicht mit dem Endpunkt dieser Menge verknüpft, während dies bei einem Polygon der Fall ist.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt.

erlaubte Inhalte

animate, animateMotion, animateTransform, set, title (dann wird ein End-Tag nötig)

Attribute

Name	Inhalt	Standardwert	Bedeutung
points	CDA TA	Pixelwert	enthält alle Punkte der Polylinie / des Polygons
systemLanguage	IANA		Sprachkürzel
transform	CDATA

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel ansehen …

<polygon class="eins" points="100,10 150,190 50,190" />
<polygon class="zwei" points="300,10 350,190 300,170 250,190" />
<polygon class="zwei" points="500,10 440,198 590,78 410,78 560,198" style="fill-rule:evenodd"/>

SVG erlaubt mehrere korrekte Schreibweisen für die Angabe der Punktemenge:

• Punkte dürfen aus positiven und negativen Zahlen bestehen.
• Trennzeichen einer Dezimalzahl ist grundsätzlich der Punkt.
• Die einzelnen Koordinaten werden durch ein Komma oder ein Whitespace-Zeichen voneinander getrennt.

Wenn sich die Linien eines Polygons überschneiden, kann mit fill-rule festgelegt werden, wie das Polygon gefüllt wird.

Empfehlung: Mit den polyline- und polygon-Elementen legst du Fixpunkte fest. Wenn du die Form anschließend verschieben willst, musst du entweder alle Punkte ändern oder eine Transformation ausführen.

Deshalb verwende ich lieber das path-Element. Hier kannst du Punkte relativ festlegen. Falls du die Form anschließend verschieben willst, musst du nur die Anfangskoordinaten im MoveTo-Kommando ändern.

--Matthias Scharwies (Diskussion) 07:55, 11. Jan. 2020 (CET)

Siehe auch

• Masken und Beschneidungen
• CSS/Funktionen/polygon()

Weblinks

• W3C: PolygonElement