|
Inhalt: |
Polygon - <polygon... />
Mit dem Tag <polygon... /> wird in SVG ein Polygon (geschlossener Linienzug) gezeichnet. Es sind mindestens[1] [2] [3] drei Punkte (zB points=20,50 190,20 0,0"), die durch ein Leerzeichen und deren x-Koordinaten und y-Koordinaten durch einen Beistrich getrennt sind, und die Farbe der Polylinie (zB stroke="blue") anzugeben. Anfangs- und Endpunkt werden durch eine gerade Linie verbunden. Mit diesen Angaben wird ein [4] Polygon mit 3 Liniensegmenten (Dreieck), der Farbe der SVG-Ansichtsfläche und der Vorgabelinienbreite 1 gezeichnet (siehe Beispiel 1).
[5] Normalerweise werden mehrere Punkte (zB 6 Punkte) für die zusammenhängenden Liniensegmente (zB für 6 Liniensegmente) eines Polygons angegeben. Außer der Farbe für die gesamte Poylinie (zB stroke="#5a00ff") muß für breitere Polygone auch die Linienbreite (zB stroke-width="8") festgelegt werden. Soll keine Flächenfüllung dargestellt werden muss fill="none" hinzugefügt werden (siehe Beispiel 2).
[6] Vorgabemäßig wird die Farbe der Fläche, die der Polygonlinienzug umschliesst, durch die Farbe der SVG-Ansichtsfläche oder durch eine zusätzlich angegebene Füllfarbe (zB fill="yellow") bestimmt. (siehe Beispiel 3).
siehe auch -> Polylinie - <polyline... />
Beispiele:<svg width="300" height="300" fill="#91f581">
[4]<polygon points="20,50 190,20 0,0" stroke="blue"/>
<!-- Beispiel 1: Minimale Angaben für ein blaues, 1 Pixel breites Polygon mit drei Punkten; Ergebnis: Dreieck mit Füllungsfarbe der SVG-Ansichtsfläche -->
[5]<polygon points="30,80 190,125 220,220 230,35 258,65 265,5" stroke="#fa19c3" stroke-width="8" fill="none"/>
<!-- Beispiel 2: Ein 8 Pixel breites, pinkes Polylgon mit 6 Punkten und 6 Liniensegmenten, ohne Füllung -->
[6]
<!-- Beispiel 3: Ein 15 Pixel breites, blaues Polygon mit 4 Punkten und 5 Liniensegmenten sowie der Füllfarbe gelb -->
</svg> |
