Установить положение элемента на основе расположения пути SVG

Question

Вопрос: Как бы вы расположили #info-box в зависимости от того, какой путь находится

Проблема: пользователь не может навести курсор на #info-box

В настоящее время у меня есть информационное окно в зависимости от местоположения мыши. Это не позволяет им нажимать на любые ссылки, которые находятся в поле. Я надеюсь получить обзор того, как я позиционирую свой элемент информационного блока. Что бы вы изменили?

Я не могу предоставить пример кода в стеке потока, поскольку svg def превышает ограничение на количество символов. Вот мой кодекс. https://codepen.io/lukeshinn/pen/aPQZJV

Answer 1

Я смог решить свою проблему, изменив прослушиватель событий 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);
});

Answer 2

Используйте свойство pointer-events css, чтобы сделать информационное поле нечувствительным к наведению, но его привязанный дочерний элемент кликабелен:

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

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