SVG Basics – Transforms
SVG Transforms
When you draw in SVG uses matrix math to figure out where on the screen the point is. Consider a document with a view box which is 200 by 200 pixels but on a display which is 100 by 100 pixels. A point at (20, 20) must be drawn at (10, 10) on the display. This transformation occurs for each and every point. The SVG viewer does this work using matrix math.
Matrix math makes many types of transformations very easy to do. Matrix math however can’t do vector field transformations like warps, swirls or bends. The SVG specification has a very good explanation on how the matrix math works. SVG allows you to add transformations using matrix math to elements before it decides where the points are on the display.
|
Code
|
Result
|
|
<g transform=”scale(5) translate(15, 15) rotate(20) skewX(20) skewY(5)” >
<rect x=”10″ y=”10″ width=”5″ height=”5″ fill=”firebrick” />
<circle r=”10″ fill=”seagreen” stroke=”blue”/>
<rect x=”5″ y=”5″ width=”12″ height=”2″ fill=”gray” stroke=”silver”/>
</g>
|
The following pseudo-functions are white space separated and applied in the order written. Transform functions are put in the ‘transform’ attribute of any container element (‘g’, ‘svg’, ‘image’) or any shape. Patterns and gradients have attributes which also accept transformations.
- translate(x, y)
- scale(sx, sy)
- rotate(angle, cx, cy)
- skewX(angle)
- skewY(angle)
- matrix(a, b, c, d, e, f)
Move the points in the object by (x, y). If ‘y’ is not set then it is assumed to be 0. Using a translate to offset is redundant on elements like ‘rect’ as the ‘x’, ‘y’ attributes offsets as well. Unless you have additional transformations you don’t need to use it.
Scale the points along the x and y axis. If sy is not used then both x and y axis are scaled by sx.
Rotate the points around the point (cx, cy). This point is an offset of the current view box. If cx and cy are not present then the points are rotated around the origin.
These skew along the axis determined by the function used. The distance “skewed” is the tan of the angle.
This directly multiplies a transformation matrix against the current transformation matrix. The other functions are much easier to understand and much easier to maintain and manipulate.
This directly multiplies a transformation matrix against the current transformation matrix. The other functions are much easier to understand and much easier to maintain and manipulate.
Order of Operation and Nesting
With matrix math, the order you do transformations is important. Translating and then rotating gives a different result from rotating and then translating. Transformations can also be nested. This is illustrated below. The final result in green is not in the same position even though the exact same transformations were used.
Example 2. The left side’s green square is rotated and then translated. The right is the reverse order. (Download)
!-- Translate then rotate -->
<use xlink:href="#example" fill="red" />
<g transform="translate(15, 15)" fill="yellow">
<use xlink:href="#example" />
<g transform="rotate(30)" fill="green">
<use xlink:href="#example" />
</g>
</g>
<!-- Rotate then translate -->
<g transform="translate(65)">
<use xlink:href="#example" fill="red" />
<g transform="rotate(30)" fill="yellow">
<use xlink:href="#example" />
<g transform="translate(15, 15)" fill="green">
<use xlink:href="#example" />
</g>
</g>
</g>
Comments