|
Mit dem polygon-Element können Sie ein Vieleck erzeugen.
Die einzelnen Punkte eines polygon-Elementes,
werden durch Angabe der Koordinatenpunkte (Eckpunkte des Vielecks) in
korrekter Reihenfolge bestimmt.
Wie im polyline-Element ist
auch hier das Attribut points zu verwenden.
Der eigentliche Unterschied zwischen einem Polygon und einer Polyline besteht darin,
dass die darstellende Anwendung bei einem Polygon den letzten angegebenen Koordinatenpunkt
automatisch mit dem ersten angegeben Koordinatenpunkt durch eine weitere Linie verbindet.
Im obigen Beispiel wird ein Dreieck mittels des polygon-Elements
erzeugt. Dazu ist lediglich die Angabe von 3 Koordinatenpunkten notwendig, da die letzte
Linie vom user agent erzeugt wird.
Das zweite Polygon im Beispiel definiert einen großen Stern.
Durch die Verwendung des Attributs transform mit dem Wert
scale(.5) wird dieses Polygon um die Hälfte seiner eigentlichen
Größe verkleinert dargestellt - kurze Vorschau auf das Kapitel
Transformationen.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das polygon-Element</title>
<desc>ein Dreieck und ein Stern</desc>
<!-- ein Dreieck -->
<polygon fill="darkblue"
points="176 10, 26 160, 326 160" />
<!-- ein (verkleinerter) Stern -->
<polygon fill="yellow" stroke="none"
points="350 75, 379 161, 469 161, 397 215,
423 301, 350 250, 277 301, 303 215,
231 161, 321 161"
transform="scale(.5)" />
</svg>
| 
