SVG's node.getScreenCTM() method failing in IE 9

Question

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.

Answer 1

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;.