Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 4   

4.6 Polygone - das polygon-Element

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>
      



index  |  Kapitel 4  |  4.5  <<  | 4.6 |  >>  5   Styling