Найти элемент внутри SVG в Opera по координатам

Question

Как найти элемент в SVG в Opera, заданные координаты?

elementFromPoint (x, y) отлично работает с Firefox, но, похоже, с Opera не работает, возвращая всегда весь SVG, а не конкретный элемент.

Можно задаться вопросом, зачем он мне вообще нужен. Ну, просто потому, что я хотел бы выделить элемент SVG под курсором и потому, что Opera не запускает какое-либо событие, когда элемент под курсором добавляется/удаляется, прежде чем вы сделаете перемещение с помощью мыши. То есть, когда я добавляю новый элемент, он не подсвечивается перед тем, как слегка двигать мышью, что не выглядит красивым.

Cheers, Михаил.

Answer 1

В Opera есть SVG1.1's 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]; 
} 

[Непроверенные код, может даже работать.]

Answer 2

способ сделать то, что вы хотите, без необходимости искать для элемента под курсором сам демонстрируется в this example. В основном, вы привязываете обработчик событий для события mouseover к корневому элементу документа, а затем проверяете цель события, чтобы узнать, какой элемент фактически получил событие.

Для кода производства вы должны добавить логику, чтобы позаботиться о ситуациях, когда элемент является ссылкой <use> (используя target.correspondingUseElement, чтобы узнать идентификатор).