Transformations
Transformations establish a new coordinate system inside the element that the transformations apply to. In SVG, this is typically done directly via the transform attribute to achieve the skew, translate, and scale effects. Mathematically, a transformation is a result of multiplying a 3 by 3 homogenous matrix (representing how to do the transformation) to the current user coordinates.
When transformations are applied in succession, the effect is analogous to the following matrix multiplication chain:
Because only the first six values are used, the vector [a b c d e f]
can specify a matrix minimally.
The following are supported types of transformation:
Transformation | Description |
---|---|
matrix(a,b,c,d,e,f)
|
Produces vector [a b c d e f] . |
translate(tx ty)
|
Translates tx along the x-axis and ty along the y-axis. This is equivalent to vector [1 0 0 1 tx ty] . |
scale(sx sy)
|
Scales sx along the x-axis and sy along the y-axis. If sy is not provided, it is assumed to be equal to sx . This is equivalent to vector [sx 0 0 sy 0 0] . |
rotate(angle cx cy)
|
Rotates about a given point (cx, cy) . The angle is in radians. If optional parameters cx and cy are not supplied, rotates about the origin of the current user coordinate system. |
skewX(angle)
|
Skews along the x-axis. The angle is in radians. It produces the vector [1 0 tan(angle) 1 0 0] . |
skewY(angle)
|
Skews along the y-axis. The angle is in radians. It produces the vector [1 tan(a) 0 1 0 0] . |