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

Question

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

function CallEvent(e){

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

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

$(mapObj).click();

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

当我SHAPE用于地图时，它工作得很好，但现在我使用 SVG 地图，它不起作用，因为elementFromPoint选择了整个SVG元素，我需要抓取PATH位于用户单击的坐标处的对象。

是否可以使用此功能找到该PATH对象？所有PATH对象都有 id 和 class。

最后，SVG 地图的结构如下：<SVG><D><PATH></PATH></D></SVG>

Answer 1

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

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