SVG: Coordinate Transformation
The transform attribute does a geometric transformation to a shape. The syntax is this:
transform="function1(…) function2(…) …"
By default, SVG provides these functions: {translate(…), scale(…), reflect(…), rotate(…), …}.
Here are examples.
Translation
here's a example using transform="translate(20 40)".
<svg width="100" height="100"> <rect x="0" y="0" width="10" height="20" style="fill:gray" /> <rect x="0" y="0" width="10" height="20" style="fill:blue;" transform="translate(20 40)"/> </svg>
Scale
transform="scale(s)" → scale uniformly by factor of s.
<svg width="100" height="100"> <circle cx="0" cy="0" r="10" style="fill:none; stroke:gray" /> <circle cx="0" cy="0" r="10" style="fill:none; stroke:blue" transform="scale(2)" /> </svg>
Here's another example. Notice that we start with a circle centered at {10,10}. After scaling, its center changed. Because transformation is done to the whole coordinate system. That is, any point {x,y} become {x * s, y * s}.
<svg width="100" height="100"> <circle cx="10" cy="10" r="10" style="fill:none; stroke:gray" /> <circle cx="10" cy="10" r="10" style="fill:none; stroke:blue" transform="scale(2)" /> </svg>
You can scale the x and y coordinate separately, by transform="scale(s1, s2)".
<svg width="100" height="100"> <circle cx="10" cy="10" r="10" style="fill:none; stroke:gray" /> <circle cx="10" cy="10" r="10" style="fill:none; stroke:blue" transform="scale(2, 3)" /> </svg>
Rotate Around Origin
transform="rotate(α)" → rotate by α degrees around the origin. Positive α is clockwise.
<svg width="100" height="100"> <rect x="50" y="0" width="10" height="20" style="fill:none; stroke:gray;" /> <rect x="50" y="0" width="10" height="20" style="fill:blue;" transform="rotate(30)"/> <rect x="50" y="0" width="10" height="20" style="fill:red;" transform="rotate(60)"/> </svg>
Rotate Around a Point
transform="rotate(α x y)" → rotate by α degrees, around point {x,y} Positive α is clockwise.
<svg width="100" height="100"> <rect x="50" y="0" width="10" height="20" style="fill:none; stroke:gray;" /> <rect x="50" y="0" width="10" height="20" style="fill:blue;" transform="rotate(30 50 0)"/> <rect x="50" y="0" width="10" height="20" style="fill:red;" transform="rotate(60 50 0)"/> </svg>
Skew X
transform="skewX(α)" → skew x coordinate by α degrees.
<svg width="100" height="100"> <rect x="10" y="10" width="30" height="30" style="fill:none; stroke:gray;" /> <rect x="10" y="10" width="30" height="30" style="fill:none; stroke:blue;" transform="skewX(20)" /> </svg>
Skew Y
transform="skewY(α)" → skew y coordinate by α degrees.
Here's a square and screw y result.
<svg width="100" height="100"> <rect x="10" y="10" width="30" height="30" style="fill:none; stroke:gray;" /> <rect x="10" y="10" width="30" height="30" style="fill:none; stroke:blue;" transform="skewY(20)"/> </svg>
Combine Transformation
multiple transformations can be combined, like this:
<… transform="f1 f2 …" />
Note: the transformation is performed with the last function first. In the above, the order is f2, f1.
Here's a rectangle.
<svg width="100" height="100"> <rect x="0" y="0" width="10" height="20" /> </svg>
Here's a rectangle, translated then rotated (in that order).
<svg width="100" height="100"> <rect x="0" y="0" width="10" height="20" style="fill:blue;" transform="rotate(30) translate(40 0)" /> </svg>
Here's a rectangle, rotated then translated (in that order).
<svg width="100" height="100"> <rect x="0" y="0" width="10" height="20" style="fill:red;" transform="translate(40 0) rotate(30)" /> </svg>
Reference
Coordinate Systems, Transformations and Units – SVG 1.1 (Second Edition)