在 Opera 中通过坐标定位 SVG 中的元素答案

【问题标题】：Locate an element within SVG in Opera by coordinates在 Opera 中通过坐标定位 SVG 中的元素
【发布时间】：2011-01-16 14:33:54
【问题描述】：

在给定坐标的情况下，如何在 Opera 中定位 SVG 中的元素？

elementFromPoint(x,y) 在 Firefox 上运行良好，但在 Opera 上似乎失败了，总是返回整个 SVG 而不是特定元素。

有人可能想知道我为什么需要它。好吧，仅仅是因为我想突出显示光标下的 SVG 元素，并且因为在您使用鼠标移动之前，当光标下的元素被添加/删除时，Opera 不会触发任何事件。也就是说，当我添加一个新元素时，在我稍微移动鼠标之前它没有突出显示，这看起来不太好。

干杯，米哈伊尔。

【问题讨论】：

标签： javascript svg opera

【解决方案1】：

在 Opera 中有 SVG1.1 的 SVGSVGElement.getIntersectionList。

var element= document.elementFromPoint(pageX, pageY);
if (element.localName.toLowerCase()=='svg' && 'getIntersectionList' in element) {
    var svgxy= Element_getPageXY(svg); // by the usual offsetLeft/offsetParent etc. method
    var rect= svg.createSVGRect();
    rect.x= pageX-svgxy[0];
    rect.y= pageY-svgxy[1];
    rect.width=rect.height= 1;
    var hits= svg.getIntersectionList(rect, null);
    if (hits.length>0)
        element= hits[hits.length-1];
}

[未经测试的代码，甚至可以工作。]

【讨论】：

工作正常，非常感谢！ “svg”变量实际上是“元素”变量。对于getPageXY，我使用了quirksmode.org/js/findpos.html的脚本，有人感兴趣吗。

【解决方案2】：

在this example 中演示了一种无需自己查找光标下元素即可完成所需操作的方法。基本上，您将 mouseover 事件的事件处理程序绑定到根文档元素，然后检查事件的目标以找出实际接收事件的元素。

对于生产代码，您应该添加逻辑来处理元素是 <use> 引用的情况（通过使用 target.correspondingUseElement 找出 id）。

【讨论】：