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

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