2010-02-13 13 views
5

Come si individua un elemento in SVG in Opera, date le coordinate?Individuare un elemento all'interno di SVG in Opera mediante le coordinate

elementFromPoint (x, y) funziona bene con Firefox, ma sembra non funzionare con Opera, restituendo sempre l'intero SVG e non l'elemento particolare.

Ci si potrebbe chiedere perché ne ho bisogno. Bene, semplicemente perché mi piacerebbe evidenziare l'elemento SVG sotto il cursore, e perché Opera non genera alcun evento quando un elemento sotto il cursore viene aggiunto/eliminato, prima di effettuare uno spostamento con un mouse. Cioè, quando aggiungo un nuovo elemento, non è evidenziato prima di spostare leggermente il mouse, il che non sembra piacevole.

Cheers, Mikhail.

risposta

5

In Opera sono presenti gli 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]; 
} 

[codice non testato, potrebbe anche funzionare.]

+1

Funziona bene, grazie mille! La variabile 'svg' è in realtà l'elemento 'elemento'. Per getPageXY ho usato lo script da http://www.quirksmode.org/js/findpos.html, chiunque è interessato. – Qnan

0

Un modo per fare ciò che si vuole senza dover cercare per l'elemento sotto il cursore da soli è dimostrato in this example. Fondamentalmente, si associa un gestore di eventi per l'evento mouseover all'elemento del documento radice, quindi si ispeziona la destinazione dell'evento per scoprire quale elemento ha effettivamente ricevuto l'evento.

Per codice di produzione, è necessario aggiungere la logica per occuparsi delle situazioni in cui l'elemento è un riferimento <use> (utilizzando target.corrispondenteUseElement per individuare l'ID).

Problemi correlati