How matrixTransform Applies SVGMatrix to SVGPoint

The matrixTransform method transforms the coordinates of an SVGPoint (or DOMPoint) by multiplying it with an SVGMatrix (or DOMMatrix). This article explains the underlying affine transformation mathematics, the calculation formulas used, and how this method maps points between different coordinate systems in SVG rendering.

Mathematical Representation

An SVG coordinate transformation uses a 3x3 affine transformation matrix to handle 2D operations like translation, rotation, scaling, and skewing. An SVGMatrix contains six component values: a, b, c, d, e, and f.

The matrix is structured as follows:

| a  c  e |
| b  d  f |
| 0  0  1 |

The SVGPoint represents a 2D coordinate \((x, y)\), augmented with a homogeneous coordinate of \(1\):

| x |
| y |
| 1 |

The Transformation Formula

When point.matrixTransform(matrix) is executed, the method performs standard matrix multiplication between the 3x3 matrix and the 3x1 vector:

| x' |   | a  c  e |   | x |
| y' | = | b  d  f | * | y |
| 1  |   | 0  0  1 |   | 1 |

This matrix multiplication evaluates to the following equations for the new coordinates \((x', y')\):

• \(x' = (a \cdot x) + (c \cdot y) + e\)
• \(y' = (b \cdot x) + (d \cdot y) + f\)

Component Roles

• a and d: Control horizontal and vertical scaling (\(S_x, S_y\)).
• c and b: Control horizontal and vertical shearing/skewing (\(k_x, k_y\)), and participate in rotation along with a and d.
• e and f: Control horizontal and vertical translation (\(T_x, T_y\)).

Practical Example

Consider a point at coordinates \((10, 20)\) transformed by a matrix that scales by \(2\) and translates by \((5, 10)\):

• \(x = 10, y = 20\)
• Matrix components: \(a = 2, b = 0, c = 0, d = 2, e = 5, f = 10\)

Applying matrixTransform:

• \(x' = (2 \cdot 10) + (0 \cdot 20) + 5 = 20 + 0 + 5 = 25\)
• \(y' = (0 \cdot 10) + (2 \cdot 20) + 10 = 0 + 40 + 10 = 50\)

The method returns a new SVGPoint with the coordinates \((25, 50)\).

Common Application: Coordinate Space Conversion

The primary use of matrixTransform in web applications is mapping screen coordinates (such as mouse event positions) to the local coordinate system of an SVG element.

This is accomplished by: 1. Creating an SVGPoint using the client coordinates (clientX, clientY). 2. Obtaining the Current Transformation Matrix using element.getScreenCTM(). 3. Inverting the matrix using matrix.inverse(). 4. Calling point.matrixTransform(invertedMatrix) to produce coordinates aligned with the SVG element’s internal coordinate grid.