|
In SVG können Elemente gruppiert werden, d.h. Sie können Elemente
mit Hilfe des g-Elements zu einer
Gruppe zusammenschließen.
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="400px" height="150px" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das g-Element</title>
<desc>Gruppierungen festlegen</desc>
<rect x="10" y="20" width="120" height="110" />
<g stroke="red">
<rect x="140" y="20" width="120" height="110"
rx="10" ry="5"
fill="none" stroke-width="1.5" />
<rect x="270" y="20" width="120" height="110"
style="fill:#efefef;" />
</g>
</svg>
Das obige Beispiel zeigt 3 Rechtecke. Die hinteren beiden Rechtecke sind mit Hilfe des
g-Elements gruppiert, d.h. sie bilden jetzt eine Einheit oder Gruppe.
Für die Elemente dieser Gruppe können die verschiedensten Eigenschaften auch gemeinsam
festgelegt werden.
Dazu werden dem g-Element die entsprechenden Attribute oder
Eigenschaften zugeordnet.
Im Beispiel wurde dem g-Element das Attribut
stroke mit dem Wert red zugeordnet,
so dass die letzten beiden Rechtecke nun mit einer roten Linienfarbe dargestellt werden.
Gruppierungen sind ebenfalls sehr hilfreich für die
Transformation von mehreren Elementen.
So können Sie gruppierte Elemente, gemeinsam verschieben, skalieren, rotieren oder
anderweitig transformieren.
Weiterhin kann eine, mit dem Element g festgelegte,
Gruppe von Elementen auch animiert werden.
Ein g-Element kann weitere g-Elemente
enthalten, so dass es möglich ist eine komplexe Zeichnung in Gruppen zu strukturieren.
Im folgenden ein einfaches Beispiel für die Verwendung von benannten Gruppen.
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="600" height="300" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das g-Element</title>
<desc>Grundformen zu einem auto gruppiert</desc>
<!-- Definition der Gruppe Auto -->
<g id="auto">
<rect x="55" y="180" width="195" height="45"
ry="15" fill="red" />
<rect x="55" y="200" width="195" height="45"
fill="red" />
<rect x="100" y="132" width="100" height="60"
ry="15" fill="red" />
<!-- Radkästen und Reifen -->
<circle cx="85" cy="250" r="21"
fill="white" />
<circle cx="205" cy="250" r="21"
fill="white" />
<g id="rad_hinten">
<circle cx="85" cy="250" r="18"
fill="black" />
<circle cx="85" cy="250" r="8"
fill="grey" />
<circle cx="75" cy="250" r="2"
fill="red" />
</g>
<g id="rad_vorn">
<circle cx="205" cy="250" r="18"
fill="black" />
<circle cx="205" cy="250" r="8"
fill="grey" />
<circle cx="195" cy="250" r="2"
fill="red" />
</g>
<!-- Stoßstange Türen Scheiben -->
<rect x="51" y="235" width="15"
height="12" ry="15" fill="grey" />
<rect x="222" y="235" width="32"
height="12" ry="15" fill="grey" />
<polygon fill="red" points="65 181, 106 135, 102 181" />
<line x1="68" y1="180" x2="200" y2="180"
style="stroke:grey; stroke-width:2px;" />
<line x1="145" y1="132" x2="145" y2="245"
style="stroke:grey; stroke-width:2px;" />
<rect x="102" y="185" width="15"
height="12" ry="15" fill="grey" />
<line x1="103" y1="191" x2="116" y2="191"
style="stroke:black; stroke-width:4px;" />
<rect x="150" y="185" width="15"
height="12" ry="15" fill="grey" />
<line x1="151" y1="191" x2="164" y2="191"
style="stroke:black; stroke-width:4px;" />
<rect x="108" y="139" width="30"
height="35" ry="8" fill="grey" />
<rect x="152" y="139" width="39"
height="35" ry="8" fill="grey" />
<!-- Beleuchtung -->
<rect x="54" y="185" width="10" height="20"
ry="20" fill="firebrick" />
<rect x="54" y="200" width="10" height="5"
ry="2" fill="darkorange" />
<rect x="243" y="210" width="10" height="5"
ry="2" fill="darkorange" />
<circle cx="248" cy="200" r="8"
fill="gold" />
<rect x="240" y="192" width="10" height="17"
fill="red" />
</g>
<!-- die Strasse -->
<line x1="0" y1="268" x2="600" y2="268" stroke="black" />
<!-- hier beginnt die Animation -->
<animateTransform xlink:href="#rad_hinten"
type="rotate" attributeName="transform"
begin="0s" dur="2s"
from="0 85 250" to="360 85 250"
repeatCount="7" />
<animateTransform xlink:href="#rad_vorn"
type="rotate" attributeName="transform"
begin="0s" dur="2s"
from="0 205 250" to="360 205 250"
repeatCount="7" />
<animateTransform xlink:href="#auto"
type="translate" attributeName="transform"
begin="0s" dur="10s"
from="-250" to="600" />
<animateTransform xlink:href="#auto"
type="translate" attributeName="transform"
begin="10s" dur="4s"
from="-250" to="50"
fill="freeze" />
</svg>
Im obigen Beispiel werden verschiedenen Grundformen, die gemeinsam ein Auto darstellen, mit dem
g-Element zu einer Gruppe zusammengeschlossen.
Innerhalb dieser Gruppe, die durch das Attribut id
eindeutig in auto benannt ist, sind zwei weitere Gruppen definiert,
deren Elemente jeweils einen Reifen darstellen und ebenfalls durch id
eindeutig in rad_hinten und rad_vorn benannt
sind.
Das Attribut id gehört zu den allgemeinen Attributen und kann
jedem Element einer SVG-Grafik zugeordnet werden, um dieses eindeutig zu identifizieren.
Es ist also möglich beliebigen Elementen oder Objekten einen einmaligen Namen zu geben.
Dabei ist zu beachten, das vergebene Werte für das Attribut id im
Dokument auch wirklich einmalig sind, d.h. keine Zeichenfolge darf mehr als einmal als Wert für
id verwendet werden.
Eindeutig benannte Elemente können von anderen Elementen (z.B. Elemente zur Animation)
referenziert werden.
In der obigen Grafik wird jeder Reifen und das gesamte Auto unabhängig voneinander animiert:
die Reifen rotieren und das Auto wird verschoben.
Die Animation soll hier lediglich als ein Beispiel zur Verwendung von eindeutig benannten
Gruppen dienen - weitergehende Informationen zu bewegten Grafiken finden Sie im Kapitel
Animationen.
| 
