SVG/Element/polygon

Aus SELFHTML-Wiki
< SVG‎ | Element
Wechseln zu: Navigation, Suche

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 legen Sie Fixpunkte fest. Wenn Sie die Form anschließend verschieben wollen, müssen Sie entweder alle Punkte ändern oder eine Transformation ausführen.

Deshalb verwende ich lieber das path-Element. Hier können Sie Punkte relativ festlegen. Falls Sie die Form anschließend verschieben wollen, müssen Sie nur die Anfangskoordinaten im MoveTo-Kommando ändern.

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

Siehe auch

Weblinks