根据SVG路径位置设置元素的位置

Question

问题：根据悬停的路径，您如何定位#info-box

问题：用户无法将鼠标悬停在#info-box

当前，我有一个基于鼠标位置定位的信息框。这不允许他们单击框中的任何链接。我希望对我如何定位信息框元素进行一次审查。你会改变什么？

由于svg def超出字符限制，我无法在stackoverflow上提供代码示例。这是我的codepen。 https://codepen.io/lukeshinn/pen/aPQZJV

Answer 1

使用pointer-events css属性使信息框对悬停不敏感，但其锚点子项可单击：

#info-box {
  pointer-events: none;
}

#info-box a {
  pointer-events: click;
}

Answer 2

我能够通过将mouseover事件侦听器更改为click来解决我的问题，还添加了一个span元素来关闭#info-box，而不是将鼠标悬停在路径上时会关闭它。

  $('#info-box').css('display','block');
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
});