I'm trying to calculate an svg's viewBox coordinates of a click event using
const { x, y } = new DOMPoint(event.clientX, event.clientY)
.matrixTransform(svg.getScreenCTM().inverse());
My svg lives inside a container that is CSS-transformed (translate). In Chrome everything is working fine, in Firefox the correct viewBox coords are calculated only if I remove the CSS-transform.
What can be done? Any help would be much appreciated.
The different behaviour you are seeing in Chrome is probably due to it being a little more advanced in its support of SVG 2 specification changes.
In the definition for getScreenCTM in the SVG 2 specification it says that among the transforms to be considered is included:
- any transforms from the SVG viewport's coordinate space to the document's viewport, i.e. taking into account the positions of all of the CSS boxes from the outermost svg element's box to the initial containing block when the SVG document fragment is inline in an HTML document
This language is not in the SVG 1.1 specification.
This (the missing SVG2 behaviour) is a known bug in Firefox. You can view the bug report here.
As for a workaround, I don't think there is an easy answer. AFAIK there is no equivalent of getScreenCTM() for HTML elements. You could read the container element's transform property, parse it, then multiply it with the matrix you get from getScreenCTM(). But you probably also need to take account of the page offsets of the container and all its ancestors.