SVG getScreenCTM() Method
getScreenCTM() returns the transformation matrix mapping an element's user coordinates to screen pixels, enabling accurate hit-testing.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Converting Between User Space and Screen Space
getScreenCTM() returns the current transformation matrix (CTM) that maps an SVG element's user coordinate system to the screen's pixel coordinate system, accounting for the viewBox, any transforms, and page scroll position, which is essential for accurately translating a mouse click's screen coordinates into the corresponding point within the SVG.
- Returns the matrix mapping user coordinates to screen pixel coordinates
- Accounts for the viewBox, applied transforms, and page scroll position
- Essential for accurately converting a mouse click into an SVG coordinate
Using getScreenCTM() for Interactive SVG
The typical pattern for interactive SVG creates an SVGPoint from a mouse event's clientX/clientY, then applies the inverse of getScreenCTM() to convert those screen coordinates into the SVG's user space, letting you accurately determine where in the drawing a user clicked regardless of how the SVG is scaled or positioned on the page.
- Create an SVGPoint from a mouse event's clientX and clientY values
- Apply the inverse of getScreenCTM() to convert into SVG user space
- Accurately determines the click location regardless of SVG scaling or position
Frequently Asked Questions
Why can't I just use the mouse event's offsetX/offsetY for SVG coordinates?
offsetX/offsetY doesn't correctly account for the SVG's viewBox scaling and internal transforms, so it gives wrong coordinates for a scaled or transformed SVG — the getScreenCTM() inverse-matrix approach handles this correctly.
What's the difference between getScreenCTM() and getCTM()?
getCTM() returns the matrix from the element to its nearest viewport (the SVG's own coordinate system), while getScreenCTM() returns the matrix all the way to actual screen pixels, which is what you need for mapping mouse events.
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