In SVG, the matrix(a, b, c, d, e, f) function defines a 2D affine transformation. It is the most powerful transform tool as it can perform translation, scaling, rotation, and skewing simultaneously. Matrix Structure The six parameters represent a 3x3 matrix where the bottom row is fixed as (0, 0, 1). It takes the form:\(\left(\begin{matrix}a&c&e\ b&d&f\ 0&0&1\end{matrix}\right)\)Coordinate Transformation When applied, it calculates new coordinates \((x_{new},y_{new})\) from the original \((x,y)\) using these formulas: \(x_{new}=ax+cy+e\)\(y_{new}=bx+dy+f\)Parameter Definitions Each value corresponds to a specific geometric effect: Parameter FunctionCommon NotationaHorizontal scalingsxbVertical skewingtan(α)cHorizontal skewingtan(β)dVertical scalingsyeHorizontal translation (distance)txfVertical translation (distance)tyCommon Transformation Matrices You can use matrix() to recreate standard SVG transform attributes:
Translation translate(tx, ty): matrix(1, 0, 0, 1, tx, ty)
Scaling scale(sx, sy): matrix(sx, 0, 0, sy, 0, 0)
Rotation rotate(θ): matrix(cos θ, sin θ, -sin θ, cos θ, 0, 0)
Skew X skewX(α): matrix(1, 0, tan α, 1, 0, 0)
Skew Y skewY(α): matrix(1, tan α, 0, 1, 0, 0)
For complex interactive designs, you can manage these transformations programmatically using the SVGTransform interface.