通过坐标在Opera中查找SVG中的元素

时间:2010-02-13 23:58:28

标签: javascript svg opera

如何在给定坐标的Opera中定位SVG中的元素?

elementFromPoint(x,y)适用于Firefox,但似乎在Opera中失败,总是返回整个SVG而不是特定元素。

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

干杯, 米哈伊尔。

2 个答案:

答案 0 :(得分:5)

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

[未经测试的代码,甚至可能有用。]

答案 1 :(得分:0)

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

对于生产代码,您应该添加逻辑来处理元素为<use>引用的情况(通过使用target.correspondingUseElement来查找id)。