SVG matrixTransform() Method
matrixTransform() applies a transformation matrix to an SVGPoint, the core operation for converting coordinates between spaces.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Applying a Matrix to a Point
Calling matrixTransform(matrix) on an SVGPoint returns a new point with the given transformation matrix applied, which is the fundamental operation used to convert a point from one coordinate space to another — most commonly, applying the inverse of getScreenCTM() to a screen-space point to get its equivalent in the SVG's user coordinate space.
- matrixTransform(matrix) applies a transformation matrix to an SVGPoint
- Returns a new transformed point rather than modifying the original
- Core operation for converting a point between coordinate spaces
The Standard Mouse-to-SVG Coordinate Pattern
The canonical use combines createSVGPoint() to make a point from mouse coordinates, getScreenCTM().inverse() to get the screen-to-user transformation, and matrixTransform() to apply it, producing the exact user-space coordinate of a mouse interaction — a pattern reused across virtually all custom interactive SVG applications.
- createSVGPoint() makes a point from the mouse event coordinates
- getScreenCTM().inverse() provides the screen-to-user transformation matrix
- matrixTransform() applies it to get the exact user-space coordinate
Frequently Asked Questions
Does matrixTransform() modify the original SVGPoint or return a new one?
It returns a new transformed SVGPoint and leaves the original point unchanged, so you typically assign the result to a new variable rather than expecting the original to be modified in place.
Can matrixTransform() be used for transformations other than coordinate conversion?
Yes, any DOMMatrix can be applied — rotation, scaling, translation, or a combination — making it useful for programmatically computing transformed positions for animation or layout beyond just mouse coordinate conversion.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG