javascript - 使用 elementFromPoint() 获取特定的子元素

Question

我有一个 SVG包含多个 PATH 的 map 对象。该 map 上有一个叠加图像，所以每当我想在 map 上调用某个事件时，我必须使用 elementFromPoint .我的函数的结构有点像这样:

function CallEvent(e){

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

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

$(mapObj).click();

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

当我使用 SHAPE 时对于 map ，它工作完美，但现在我使用 SVG map ，它不起作用，因为 elementFromPoint选择整个 SVG元素，我需要捕获 PATH位于用户点击坐标处的对象。

是否有可能找到 PATH使用此功能的对象？全部PATH对象有 id 和 class。

最后 SVG map 的结构如下:<SVG><D><PATH></PATH></D></SVG>

Answer 1

jQuery Nearest Element plugin可以满足您的需求。

您可以使用类似 $.nearest({x: 100, y: 100}, 'path') 的东西来识别最近的路径。