SVG Transformations
The transform attribute allows you to manipulate elements by moving, rotating, scaling, or skewing them. It's one of the most powerful tools for positioning and animating SVG shapes.
How Transformations Work
Transformations change the coordinate system for the element they are applied to. This means if you translate(50, 50) an element, its internal (0,0) point is now at (50,50) on the main canvas.
The most common transformation functions are:
| Function | Description |
|---|---|
translate(x, y) |
Moves the element by x and y units. |
rotate(angle, cx, cy) |
Rotates the element by angle degrees. Optional cx, cy sets the center of rotation. |
scale(sx, sy) |
Scales the element. sx is horizontal, sy is vertical (optional). |
skewX(angle) |
Skews the element along the x-axis. |
skewY(angle) |
Skews the element along the y-axis. |
Example: Translate and Rotate
In this example, we take a simple square and apply translation and rotation:
Example: Scale and Skew
Scaling and skewing are also straightforward but can have dramatic effects:
Combining Transformations
You can apply multiple transformations by separating them with spaces. For example: transform="translate(50, 50) rotate(45)". Note that the order matters: translating then rotating is different from rotating then translating!