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变量是 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">​&lt;/rect>​

PS：很难将此 SVG 上传到可公开访问的服务器。

Answer 1

我发现了问题。

在 IE 9 中，您不能调用getScreenCTM()父节点为display: none;.

如果被查询的节点是，display: none;那么getScreenCTM()调用就可以了，但是不能在隐藏元素的子节点上调用。

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