SVG: Transformationen

► W3C-Empfehlung: Coordinate system transformations transform

Analog zu den 2D-Transformationen in CSS3 lassen sich auch in SVG die einzelnen Elemente der Grafik in der Ebene manipulieren. Diese Manipulationen können mit dem SVG-Attribut transform umgesetzt werden.

Versatz – translate

Mit Hilfe der Transformation translate kann ein Objekt entlang der Achsen des Koordinatensystems verschoben werden. Wird lediglich ein Wert angegeben, so wird das Objekt entlang der x-Achse verschoben. Werden zwei Werte angegeben, so gilt der erste Wert für den Versatz in x-Richtung und der zweite für den Versatz in y-Richtung.

<svg width='350px' height='180px'>
  <rect x='80' y='40' width='190' height='100' rx='10' style='fill:red;opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='80' y='40' width='190' height='100' transform='translate(50 20)' rx='10' style='fill:blue;opacity:.5;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

Skalierung – scale

Mit Hilfe der Transformation scale kann ein Objekt skaliert (vergrößert oder verkleinert) werden, wobei sich der Bezugspunkt der Skalierung am Nullpunkt des Koordinatensystems befindet (links oben). Wird lediglich ein Wert angegeben, so gilt dieser sowohl für die Skalierung in x- als auch in y-Richtung. Werden zwei Werte angegeben, so gilt der erste für die Skalierung in x-Richtung und der zweite für die Skalierung in y-Richtung. Die ursprünglichen Dimensionen werden mit dem angegebenen Wert multipliziert. Eine Strecke mit einer ursprünglichen Länge von 100 Pixeln besitzt daher z. B. nach Anwendung von transform='scale(2.5)' eine Länge von 250 Pixeln.

<svg width='350px' height='180px'>
  <rect x='80' y='40' width='190' height='100' rx='10' style='fill:red;opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='80' y='40' width='190' height='100' transform='scale(1.2 .5)' rx='10' style='fill:blue;opacity:.5;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

Neigung – skewX, skewY

Mit Hilfe der Transformation skewX kann ein Objekt in Richtung der x-Achse geneigt werden. Entsprechend kann ein Objekt mit der Transformation skewY in Richtung der y-Achse geneigt werden. Der angegebene Wert ist der Winkel der Neigung, wobei sich der Ansatzpunkt dieses Winkels bei skewX auf der x-Achse und bei skewY auf der y-Achse des Koordinatensystems befindet.

<svg width='350px' height='180px'>
  <rect x='80' y='40' width='190' height='100' rx='10' style='fill:red;opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='80' y='40' width='190' height='100' rx='10' transform='skewX(-20)' style='fill:blue;opacity:.5;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='80' y='40' width='190' height='100' rx='10' transform='skewX(-40)' style='fill:green;opacity:.5;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

Drehung – rotate

Mit Hilfe der Transformation rotate kann ein Objekt gedreht werden. Mindestens der Winkel der Rotation muss als Wert angegeben werden. In diesem Fall ist der Drehpunkt der Nullpunkt des Koordinatensystems (links oben). Zusätzlich zum Winkel können die Koordinaten des Drehpunktes auf der x- und y-Achse angegeben werden.

<svg width='350px' height='180px'>
  <rect x='80' y='40' width='190' height='100' rx='10' style='fill:red;opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='80' y='40' width='190' height='100' rx='10' transform='rotate(20)' style='fill:blue;opacity:.5;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>

<svg width='350px' height='180px'>
  <rect x='80' y='40' width='190' height='100' rx='10' style='fill:red;opacity:1;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
  <rect x='80' y='40' width='190' height='100' rx='10' transform='rotate(20 175 90)' style='fill:blue;opacity:.5;stroke:yellow;stroke-width:4px;stroke-opacity:1;' />
</svg>