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

Question

如何在Opera中根据坐标定位SVG元素？

使用elementFromPoint(x,y)可以在Firefox中正常工作，但在Opera中似乎失败了，总是返回整个SVG而不是特定的元素。

你可能会想为什么我需要它。简单来说，我想突出显示鼠标下的SVG元素，并且因为Opera不会在添加/删除光标下的元素之前触发任何事件，除非你移动鼠标。 也就是说，在我添加新元素之前，它不会被突出显示，这看起来不太好。

谢谢， Mikhail。

- Qnan

Answer 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];
}

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

- bobince

---

运行良好，非常感谢！'svg' 变量实际上是 'element'。对于 getPageXY，我使用了 http://www.quirksmode.org/js/findpos.html 中的脚本，如果有人感兴趣。 - Qnan

Answer 2

在编写代码时，有一种方法可以让你不必自己查找光标下的元素，这在this example中有所体现。基本上，你要将鼠标悬停事件的事件处理程序绑定到根文档元素上，然后检查事件的目标来找出实际接收事件的元素。

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

- appas