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中有效：

有谁知道我的代码失败的原因？

注意：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;。

在IE 9中SVG的node.getScreenCTM（）方法失败

1 个答案: