在IE 9中SVG的node.getScreenCTM()方法失败

Question

我在SVG观察鼠标事件中有一些javascript,需要将鼠标坐标转换为SVG空间中的实际坐标(使用viewBox和其他转换).

此代码适用于WebKit/Gecko浏览器:

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());
}

在IE 9中,getScreenCTM()抛出异常:

Unexpected call to method or property access.

我发现在线示例代码表明我的代码是正确的,我甚至发现了一个似乎使用完全相同的技术的SVG,它在IE 9中有效:

• http://www.codedread.com/blog/archives/2005/12/21/how-to-enable-dragging-in-svg/
• http://www.codedread.com/dragtest.svg

有谁知道为什么我的代码失败了？

注意:node变量是<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:将此SVG上传到可公开访问的服务器很困难.

Answer 1

我发现了这个问题.

在IE 9中,您无法调用getScreenCTM()父节点所在的节点display: none;.

如果正在查询的节点是display: none;可以调用的getScreenCTM(),但是您无法在隐藏元素的子节点上调用它.

我的解决方法是切换display: none;到opacity: 0;调用之前getScreenCTM(),然后立即将其更改回display: none;.