The transform attribute does a geometric transformation to a shape. The syntax is this:
transform="function1(…) function2(…) …"
By default, SVG provides these transformation functions:
translate
scale
reflect
rotate
and more.
Here are examples.
Translation
transform="translate(xy)"
Move it x unit to the right and y unit down.
Scale
transform="scale(s)"
Scale uniformly by factor of s, with respect to the origin.
transform="scale(s1, s2)"
Scale x by factor of s1,
Scale y by factor of s2.
Here is another example. Notice that we start with a circle centered at {10,10}. After scaling, its center changed. Because transformation is done with respect to {0,0}. That is, any point {x,y} become {x * s, y * s}.
You can scale the x and y coordinate separately, by transform="scale(s1, s2)".
Rotate Around Origin
transform="rotate(α)"
Rotate by α degrees around the origin. Positive α is clockwise.
Rotate Around a Point
transform="rotate(αxy)"
Rotate by α degrees, around point {x, y} Positive α is clockwise.
Skew X
transform="skewX(α)"
Skew x coordinate by α degrees.
Skew Y
transform="skewY(α)"
Skew y coordinate by α degrees.
Here is a square and screw y result.
Combine Transformations
multiple transformations can be combined, like this:
transform="…f3f2f1"
Note: the transformation is performed with the right-most function first.
(same convention as in group theory or linear algebra matrix multiplication)
Here is a rectangle.
Here is a rectangle, translated then rotated (in that order).
Here is a rectangle, rotated then translated (in that order).