Question

I have an SVG map that contains multiple PATH objects. There’s an overlaying image over that map, so whenever I want to call some event on the map, I have to use elementFromPoint. My function was structured somewhat like this:

function CallEvent(e){

$('.overlay-image').hide(0);

var mapObj = document.elementFromPoint(e.clientX, e.clientY);   

$(mapObj).click();

$('.overlay-image').show(0);
}

When I was using SHAPE for the map, it was working perfect, but now I use SVG map, it does not work because the elementFromPoint selects the entire SVG element and I need to grab the PATH object that is located at the coordinates the user made a click at.

Is it possible to find that PATH object using this function? All PATH objects have id and class.

Finally the SVG map is structured like this: <SVG><D><PATH></PATH></D></SVG>

Answer 1

The jQuery Nearest Element plugin could do what you need.

You could use something like $.nearest({x: 100, y: 100}, 'path') to identify the nearest path.