Localice un elemento dentro de SVG en Opera por las coordenadas

Question

¿Cómo localizo un elemento dentro de SVG en Opera, dadas las coordenadas?

elementoFromPoint (x, y) funciona bien con Firefox, pero parece fallar con Opera, devolviendo siempre todo el SVG y no el elemento en particular.

Uno podría preguntarse por qué lo necesito en absoluto. Bueno, simplemente porque me gustaría resaltar el elemento SVG debajo del cursor, y porque Opera no activa ningún evento cuando se agrega/elimina un elemento debajo del cursor, antes de hacer un movimiento con el mouse. Es decir, cuando agrego un elemento nuevo, no se resalta antes de mover el mouse ligeramente, lo que no se ve bien.

Cheers, Mikhail.

Answer 1

En Opera hay 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]; 
} 

[código no probado, incluso podría funcionar.]

Answer 2

Una manera de hacer lo que quiera sin necesidad de mirar para el elemento bajo el cursor mismo se demuestra en this example. Básicamente, vincula un controlador de eventos para el evento mouseover al elemento raíz del documento, luego inspecciona el objetivo del evento para descubrir qué elemento realmente recibió el evento.

Para el código de producción, debe agregar lógica para resolver situaciones en las que el elemento sea una referencia <use> (utilizando target.correspondingUseElement para encontrar la identificación).