Grundsätzlich wird bei der Arbeit mit Vektorgrafiken zwischen drei unterschiedlichen Formen der Transformation unterschieden:
Dementsprechend gab es in Raphael ursprünglich die Funktionen scale, rotate und translate. Diese Funktionen sind jedoch mittlerweile als deprecated gekenntzeichnet. Das gesamte Spektrum der Transformationen wird jetzt durch die Funktion transform realisiert. Dabei wird eine Zeichenkette übergeben, die bestimmt, welche Art von Transformation durchgeführt wird.
Ich verwende hier und in vielen der folgenden Beispiele immer 2 Objekte, eins davon kennzeichnet den unveränderten Ausgangszustand, das andere zeigt das Transformationsergebnis. Der vollständige Quellcode für das Beispiel sieht so aus:
// Zeichnungsflaeche 320x100 Pixel in div skalierung erzeugen
var paper = Raphael("skalierung", 320, 100);
// 2 mal das gleiche Quadrat mit 50 Pixel
var rechteck1 = paper.rect(20,20,50,50);
var rechteck2 = paper.rect(20,20,50,50);
// 1. Quadrat um das 1.5-fache skalieren
rechteck1.transform("s1.5");
Der entscheidende Punkt ist die Zeichenkette s1.5. Der Buchstabe s steht für Skalierung. 1.5 ist Der Skalierungsfaktor. Wenn der Skalierungsfaktor <1, dann wird das SVG-Objekt verkleinert.
Wenn man den Transformationstring so definiert:
// 1. Quadrat um 45 Grad drehen
rechteck1.transform("r45");
dann wird das Objekt um 45 Grad gedreht.
Eine Verschiebung kann in Richtung der x-Achse oder der Y-Achse oder entlang beider Achsen erfolgen. Demzufolge müssen 2 Parameter angegeben werden, wobei einer 0 sein kann. Mit
// 1. Quadrat um 20 Pixel in Richtung x-Achse und um 10 Pixel in Richtung y-Achse verschieben
rechteck1.transform("t20,10");
erfolgt einer Verschiebung des Objektes entlang der x-Achse um 20 Pixel und um 10 Pixel entlang der y-Achse.
Diese drei Transformationstypen kann man nahezu beliebig kombinieren und dabei alles in einem Transformationsstring zusammenfassen. So ergibt
// 1. Quadrat um 20 Pixel in Richtung x-Achse und um 10 Pixel in Richtung y-Achse verschieben
rechteck1.transform("t25,0r45s0.73");
durch Verschiebung in Richtung der X-Achse um 25 Pixel, Drehung um 45 Grad und Verkleinerung auf 0,73 diese Objektzusammenstellung: