Grafikelemente gruppieren und positionieren

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Jede SVG-Grafik setzt sich aus verschiedenen einfachen Elementen zusammen, die kombiniert und positioniert werden können. Wenn sich eine komplexere Grafik aus einzelnen Bestandteilen zusammensetzt, die aber wieder nicht nur aus einem einzelnen SVG-Element bestehen, ist es sinnvoll, diese Elemente zu gruppieren. Das hat den Vorteil, dass Sie die ganze Gruppe positionieren können, ohne die Positionen der einzelnen Gruppenelemente ändern zu müssen.

Elemente gruppieren

Wenn Sie Elemente gruppieren möchten, die zueinander gehören, fassen Sie diese einfach in einen <g>-Tag ein. Das wirkt sich dann ähnlich aus, als wenn Sie in einem Grafikprogramm verschiedene Grafikelemente gruppieren. WebDraw stellt dies auch genauso dar. Sie können die gruppierten Grafikelemente dann nur noch gemeinsam verschieben.

Abbildung: Gruppierte Elemente können auch in WebDraw nur als Einheit verschoben werden.

Den <g>-Tag können Sie einfach im Quellcode ergänzen, indem Sie vor dem ersten Element der Gruppe ein <g> einfügen und nach dem letzten Tag der Gruppe ein </g>.

Das setzt also voraus, dass Sie alle Elemente der Gruppe nacheinander definiert haben. Wenn das nicht so ist, müssen Sie das zuvor ändern, indem Sie die Tags hintereinander kopieren. Das Ergebnis könnte dann bspw. wie folgt aussehen:

Gruppen positionieren

Wenn Sie bis hierher alle Schritte aufmerksam verfolgt haben, werden Sie sicherlich davon ausgehen, dass auch Gruppen einfach über die Attribute x und y positioniert werden können. Das funktioniert aber leider nicht. Diese Universalattribute stehen für <g>-Tags nicht zur Verfügung. Die einzige Möglichkeit ist, das transform-Attribut zu verwenden und dort mit Angabe der Transformation translate eine Position für die Gruppe zu definieren.

Das hat zur Folge, dass sich alle Koordinaten innerhalb der Gruppe relativ auf die Position der Gruppe beziehen. Es gibt somit zwei Möglichkeiten, effizient Gruppen zu positionieren.

• Wenn Sie von vornherein eine Gruppe planen möchten, können Sie die Elemente in der Gruppe zum Nullpunkt ausrichten. Sie werden dann immer korrekt angezeigt, egal welche Position die Gruppe hat, weil dann bei der Position der Gruppe der Nullpunkt des neue Koordinatensystems liegt.
• Existieren die Elemente der Gruppe jedoch bereits und entschließen Sie sich erst später, die Elemente zu gruppieren, kann die Anpassung der Koordinaten sehr aufwändig sein. Hier ist es dann oft sinnvoller, die Gruppe an der Position 0/0 zu positionieren. Damit stimmen dann das Koordinatensystem der Gruppe und der Grafik überein.

Gruppenelemente relativ ausrichten

SVG erlaubt sowohl die Verwendung absoluter als auch relativer Koordinaten. Absolute Koordinaten wurden in allen vorherigen Beispielen verwendet. Sie definieren eine eindeutige Position innerhalb eines Koordinatensystems.

Sie können stattdessen auch relative Angaben verwenden, indem Sie die Koordinaten mit + und - versehen. Im folgenden Listing werden damit die Elemente der Gruppe relativ zum Nullpunkt des Gruppenkoordinatensystems angeordnet. Der schwarze, mit <circle> definierte Punkt soll hier nur dazu dienen, den Nullpunkt der Gruppe zu markieren.

Wenn Sie diesen Code in einer SVG-Datei testen und ausführen, erhalten Sie folgendes Bild:

Abbildung: Elemente um den Nullpunkt der Gruppe angeordnet.

Hinweis:
Auch in Pfaden kommen relative Positionen zum Einsatz. Allerdings werden sie hier anders definiert. Wie Sie Pfade definieren und einsetzen, ist Thema des Kapitels Komplexe Grafikelemente und Formatierungen einsetzen.