SVG's node.getScreenCTM() method failing in IE 9
exception, internet-explorer, svg
Solution
I found the problem.
In IE 9, you cannot call `getScreenCTM()` on a node who's parent node is `display: none;`.
If the node being queried is `display: none;` then it's fine to call `getScreenCTM()`, but you can't call it on the child node of a hidden element.
My workaround was to switch from `display: none;` to `opacity: 0;` before calling `getScreenCTM()`, then immediately changing it back to `display: none;`.
Problem
I've got some javascript in an SVG observing mouse events, and need to convert the mouse coordinates into actual coordinates in the SVG's space (with viewBox and other transformations). This code works in WebKit/Gecko browsers: ``` function transformEventCoordsToNodeCoords(evt,node) { var point = document.documentElement.createSVGPoint(); point.x = evt.clientX; point.y = evt.clientY; var ctm = node.getScreenCTM(); return point.matrixTransform(ctm.inverse()); } ``` In IE 9 getScreenCTM() throws an exception: ``` Unexpected call to method or property access. ``` I found sample code online suggesting my code is correct, and I even found an SVG which appears to use exactly the same technique and it works in IE 9: - http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/ - http://www.codedread.com/dragtest.svg Does anyone know why my code is failing? Note: the `node` variable is a `<rect>`: ``` <rect id="tooltip_box" x="698.7705078125" y="278.19676208496094" rx="20" ry="20" width="310" height="165" class="tooltip_box_region_level_1"></rect> ``` PS: It would be difficult to upload this SVG to a publicly accessible server.