Positionierende Attribute
<< < > >> > Hauptteil > universale Attribute > positionierende

2. Hauptteil
   2.4 universale Attribute
     2.4.2 positionierende

Grundlegend wichtig sind die Attribute, mit denen man die Position,Ausdehnung und Ausrichtung eines Elementes festlegen kann. Für die Ausgangsposition benutzt man die Attribute x und y. Die Werte sind numerische Angaben, für die es verschiedene Einheiten gibt: %, pt, pc, cm, mm, in, px etc. Dieses sollte aus HTML bekannt sein. Eine komplette Auflistung der Einheiten gibt es beim W3C. Ein Beispiel zu den Attributen x und y zeigt das Beispiel 2.

Normalerweise wird für ein Element mit den Attributen x und y die linke, obere Ecke des Elements gesetzt, aber für einige Elemente gibt es auch abweichende Attribute, wo das anders ist. Z. B. wird bei einer Ellipse sinnvollerweise stattdessen der Mittelpunkt über die Attribute cx und cy definiert, solche Abweichungen werden bei Kapiteln der jeweiligen Elementen aufgezeigt.

Ein mächtiges Attribut zum Thema Position und (!) Ausrichtung ist transform. transform kann eine Liste von Transformationen, die auf das Element hintereinander wirken, beinhalten, wobei alle der folgenden Möglichkeiten zur Transformation von Elementen genutzt werden können:

Transformation Erläuterung
scale(sx [sy]) Skaliert das Element um den Faktor sx in X-Richtung und sy in Y-Richtung. Ist nur ein Wert angegeben, gilt dieser für beide Richtungen.
translate(tx [ty]) Verschiebt das Element um tx in X-Richtung und ty in Y-Richtung. Ist ty nicht angegeben, wird der Wert 0 angenommen.
rotate(rotate-angle [cx cy]) Rotiert das Element um rotate-angle Grad um den über cx und cy definierten Punkt. Sind cx und cy nicht angegeben, wird der Ursprung des user-Koordinatensystem benutzt.
skewX(skew-angle) Verdreht das Element entlang der X-Achse um skew-angle
skewY(skew-angle) Verdreht das Element entlang der Y-Achse um skew-angle
matrix(a b c d e f) Wendet die Transformationsmatrix [a b c d e f] auf das Element an. Mittels der Matrix können alle Transformationen auf einmal ausgeführt werden. Wie die Matrix für die einzelnen Transformationen aussehen, kann auf http://www.w3.org/TR/SVG11/coords.html#TransformMatrixDefined nachgelesen werden.

Hier ein Beispiel zu Transformationen.