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 transformation functions:
translate
scale
reflect
rotate
- and more.
Here are examples.
Translation
transform="translate(x y)"
- Move it x unit to the right and y unit down.
<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, with respect to the origin.
transform="scale(s1, s2)"
- Scale x by factor of s1, Scale y by factor of s2.
<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 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}.
<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 is 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 Transformations
multiple transformations can be combined, like this:
transform="… f3 f2 f1"
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.
<svg width="100" height="100"> <rect x="0" y="0" width="10" height="20" /> </svg>
Here is 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 is 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>