Neue Koordinatensysteme erzeugen

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

Neben den beiden von SVG zur Verfügung gestellten Koordinatensystemen können Sie auch eigene definieren. Dazu verwenden Sie das transform-Attribut in einem Tag. Es erzeugt ein neues Koordinatensystem, dessen Nullpunkt Sie innerhalb des übergeordneten Koordinatensystems definieren.

Das transform-Attribut unterstützt verschiedene Werte, die neue Koordinatensysteme erzeugen und initialisieren. Abhängig von der Art der Transformation, müssen Sie eine Liste von Werten angeben, die unterschiedliche Bedeutungen haben. Die einzelnen Werte werden dabei durch Leerzeichen und/oder Kommata getrennt.

Das folgende Listing zeigt ein einfaches Beispiel, bei dem lediglich an der Position 50/50 der Grafik ein neues Koordinatensystem für die mit <g> definierte Gruppe definiert wird. Innerhalb der Gruppe beziehen sich die Positionsangaben dann auf das erzeugte Koordinatensystem. Das erste Rechteck wird also im Nullpunkt des neuen Koordinatensystems erzeugt, befindet sich im Koordinatensystem der Grafik also am Punkt 50/50.

Definierte Koordinatensysteme

Abbildung: Definierte Koordinatensysteme.

<g id="aufz01" transform="translate(50,50)">
  <rect x="0" y="0" width="35" height="35" rx="0" ry="0" style="fill:rgb(255,64,64)"/>
  <rect x="36" y="22" width="42" height="42" rx="0" ry="0" style="fill:rgb(255,255,0)"/>
  <rect x="24" y="32" width="22" height="22" rx="0" ry="0" style="fill:rgb(64,64,255)"/>
</g>

Für das transform-Attribut stehen folgende Werte zur Verfügung:

  • translate(tx,ty), damit wird der Nullpunkt des neuen Koordinatensystem festgelegt. Die Angabe tx muss erfolgen, ty ist optional. Lassen Sie sie weg, wird 0 verwendet. Für beide Angaben sind absolute und relative Angaben zulässig.
  • scale(sx,sy), damit erfolgt eine Größenänderung. Die Parameter sx und sy geben dabei die Größe der Änderung für X- und Y-Achse in relativen Werten an. Werte größer als eins werden als Vergrößerung interpretiert und Wert kleiner als eins als Verkleinerung. Um ein Element oder eine Gruppe um 50% zu verkleinern, geben Sie scale(0.5,0.5) an. Der Parameter sy kann weggelassen werden, dann bekommt er den gleichen Wert wie sx. Ein Beispiel dazu folgt.
  • rotate(rotate-angle,cx,cy), dreht das Objekt, um den mit rotate-angle angegebenen Winkel in Grad. Werden cx und cy nicht angegeben, wird das Objekt um einen Punkt gedreht, der der oberen linken Ecke des Objekts entspricht. Ansonsten erfolgt die Drehung um den Punkt cx/cy.
  • skewX(skew-angle), kippt das Element auf der X-Achse um den als Parameter übergebenen Winkel in Grad.
  • skewY(skew-angle), kippt das Element auf der Y-Achse um den als Parameter übergebenen Winkel in Grad.
  • matrix(a,b,c,d,e,f), dabei wird eine Matrix zur Gruppe addiert, die aus sechs Werten besteht. Damit lassen sich alle anderen Transformationen ebenfalls erzeugen. Wer allerdings in der Matrizenrechnung der Mathematik nicht fitt ist, sollte die Finger von dieser Funktion lassen, da sonst nur Zufallsergebnisse erzielt werden können.

Hinweis:
Wenn Sie WebDraw verwenden und dort das transform-Attribut eingeben, wird dieses immer in eine matrix-Operation konvertiert, wenn Sie zur Layout-Ansicht wechseln oder die Grafik speichern.
Beispiele zu den Transformationen skewX, skewY und rotate folgen unter Filter, Transformationen und Farbverläufe.

Die Verwendung dieser Transformationen soll nun an einem kleinen Beispiel verdeutlicht werden. Nehmen Sie an, Sie haben eine Gruppe mit dem <g>-Tag definiert und möchten nun alle Elemente einheitlich verkleinern. Dann haben Sie im Prinzip die Möglichkeit, alle Elemente manuell zu verkleinern, indem Sie die Breiten- und Höhen bzw. Radius-Angaben verkleinern, oder Sie verkleinern die ganze Gruppe mit einer Transformation.

Hinweis:
Bei der Angabe von Werten, die kleiner als eins sind, werden die Elemente verkleinert, bei Werten größer als eins vergrößert. Dezimalwerte müssen mit Punkt als Dezimaltrennzeichen eingegeben werden: 0.2 = 0,2 = 20%.

Das folgende Listing reduziert die Größe der Gruppe auf 20% der Originalgröße.

<g id="aufz01" transform="scale(0.2)">
  <rect x="0" y="0" width="35" height="35" rx="0" ry="0" style="fill:rgb(255,64,64)"/>
  <rect x="36" y="22" width="42" height="42" rx="0" ry="0" style="fill:rgb(255,255,0)"/>
  <rect x="24" y="32" width="22" height="22" rx="0" ry="0" style="fill:rgb(64,64,255)"/>
</g>

Hinweis:
Beachten Sie, dass diese transform-Anweisung die Initialisierung eines neuen Koordinatensystems zur Folge hat. Da dessen Anfangsposition nicht bestimmt wurde, beginnt es im Nullpunkt des Koordinatensystems der Grafik. Das führt dazu, dass die gesamte Gruppe im Nullpunkt der Grafik beginnt. Wenn die ursprüngliche Position der Gruppe beibehalten werden soll, muss dies durch eine zweite Transformation erreicht werden.

Sollen mehrere Transformationen gleichzeitig durchgeführt werden, werden sie alle nacheinander im Wert des transform-Attributs aufgeführt. Im folgenden Listing wird wieder mit scale die Ausgabe verkleinert und zusätzlich mit translate die Position der Gruppe festgelegt:

<g id="aufz01" transform="translate(50,50) scale(0.2)">
  <rect x="0" y="0" width="35" height="35" rx="0" ry="0" style="fill:rgb(255,64,64)"/>
  <rect x="36" y="22" width="42" height="42" rx="0" ry="0" style="fill:rgb(255,255,0)"/>
  <rect x="24" y="32" width="22" height="22" rx="0" ry="0" style="fill:rgb(64,64,255)"/>
</g>

Hinweis:
Abhängig von den durchgeführten Transformationen, kann deren Reihenfolge eine Rolle für das erzielte Ergebnis spielen.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de