Get SVG-Object_s at given coordinates?

Question

Get SVG-Object_s at given coordinates?

1.6k views Asked by kai-dj At 10 June 2015 at 11:59

I'd like to obtain object IDs from an SVG-file via coordinates.

For example in

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"
   height="50" width="50">
   <rect id="rectRED"
 x="15" y="5" height="30" width="30"
        style="fill:#ff0000;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" />
   <rect id="rectBLUE"
 x="5" y="15" height="30" width="30"
        style="fill:#0000ff;fill-opacity:0.5;stroke:#000000;stroke-width:1.5" />
</svg>

getObjectsAt(10,25) should return a List containing rectBLUE
getObjectsAt(25,25) should return a List containing rectRED and rectBLUE
getObjectsAt(10,10) should return something like NIL

Is there a way to accomplish this?

Original Q&A

There are 1 answers

**pawel** · Accepted Answer · 2015-06-10T12:30:51+00:00

There's document.elementFromPoint method, but it only returns the topmost element. To get all the elements under a point you could find the topmost one, hide it and look at the point again until no more elements are there:

var elementsAt = function( x, y ){
    var elements = [], current = document.elementFromPoint( x, y );
    // at least one element was found and it's inside a ViewportElement
    // otherwise it would traverse up to the <html> root of jsfiddle webiste.
    while( current &&  current.nearestViewportElement ){
        elements.push( current );
        // hide the element and look again
        current.style.display = "none";
        current = document.elementFromPoint( x, y );
    }
    // restore the display
    elements.forEach( function( elm ){
       elm.style.display = ''; 
    });
    return elements;
}

http://jsfiddle.net/duo02d38/

TechQA.

Get SVG-Object_s at given coordinates?

There are 1 answers

Related Questions in SVG

Related Questions in COORDINATES

Popular Questions

Popular Tags

Trending Questions