JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 446

Für alle graischen Elemente können Füllung, Art der Umrisslinie und Transparenz durch
Attribute festgelegt werden. In SVG sind im Wesentlichen alle graischen Elemente verfüg-
bar, die man auch aus anderen Konzepten wie Java2D, JavaFX oder eben der Canvas -Techno-
logie kennt, etwa Rechtecke, Kreise, Ellipsen, Pfade, Polygone etc. Die Elemente werden
durch weitgehend sprechende Elemente in der XML-Struktur beschrieben. Wer auch immer
mit der Programmierung von graischen Elementen Erfahrung hat, wird die meisten Ele-
mente sofort erkennen und anwenden können.
Das Element <path /> deiniert beispielsweise eine Linie bestehend aus einer beliebigen
Kombination von Strecken, Ellipsenbögen, quadratischen und kubischen Bézierkurven
sowie Neupositionierungen, die mit Hilfe von relativen oder absoluten Koordinaten be-
schrieben werden. Der Pfad kann geschlossen, gefüllt und als Clipping-Pfad verwendet
werden. Der Pfad ist das mächtigste Graikelement in SVG. Praktisch alles, was durch
andere Graikelemente gezeichnet werden kann, kann durch ein Pfadelement äquivalent
dargestellt werden. Damit ist die Anwendung aber auch nicht ganz einfach und die weite-
ren Graikelemente vereinfachen die Anwendung.
Das Element <circle /> deiniert einen Kreis, der durch seinen Radius und durch die
Position des Mittelpunkts beschrieben wird.
Das Element <ellipse /> deiniert eine Ellipse, die durch ihre zwei Halbachsenradien
so wie, analog zum Kreis-Element, durch die Position ihres Mittelpunkts beschrieben wird.
Sehr einfach ist das Rechteck, das durch das Element <rect /> über die Position seiner
oberen linken Ecke, seiner Breite und seiner Höhe deiniert wird. Optional können die
Ecken des Rechtecks abgerundet werden.
Das Element <line /> deiniert eine einfache gerade Linie (Strecke), die über die Koordi-
naten ihrer beiden Endpunkte beschrieben wird.
Der Polygonzug, der über das Element <polyline /> deiniert wird, gibt eine beliebige
Zahl von Punkten an, die als Polygonzug durch Strecken verbunden werden. Die Punkte
werden über Koordinatenpaare beschrieben.
Das Element <polygon /> deiniert ein Vieleck, das über seine Eckpunkte beschrieben
wird. Wie beim Polygonzug werden auch hier die Eckpunkte als Koordinatenpaare ange-
geben und in der Reihenfolge ihrer Deinition miteinander verbunden.
Mit dem Element <text /> kann man in SVG Text in die Graik einbetten. Das Textele-
ment kann über Attribute, wie zum Beispiel Schritgröße und Schritart, Laufrichtung
und Wortabstand formatiert werden. Text kann zudem über Unterelemente ( <tspan /> )
strukturiert werden.
Das Element ( <image /> ) bindet eine Rastergraik ein, die über eine Pfadangabe, Breite
und Höhe sowie die Position beschrieben wird.
Man kann in SVG auch eine Gruppierung von Elementen vornehmen. Dazu dient das
Gruppenelement ( <g /> ). Transformationen und Styling, die auf das Gruppenelement an -
gewendet werden, gelten für alle damit zusammengefassten untergeordneten Elemente.
14.5.2.6■Stilinformationen
Jedes Element in SVG kann durch Angabe von Styling-Eigenschaten in seiner optischen
Erscheinung angepasst werden. Das geschieht durch das style -Attribut oder Attribute zu ein-
zelnen Eigenschaten wie ill oder stroke . Sie sollten das aus den Erfahrungen mit dem