Как обеспечить интерактивность SVG с промежутками между элементами?

Question

[JackShcherbakov]

Здравствуйте!

С чем я имею дело:

Дизайнер сделал SVG схему:


Схема поделена на несколько секторов. При наведении на сектор, он должен выделиться синим цветом. Также, при наведении на сектор, должна появиться всплывающая подсказка, в которой указана цена билета в определенном секторе.

Ожидаемое поведение:

JavaScript отлавливает событие onmousemove на SVG и проверяет, находится ли курсор над элементом, относящимся к тому или иному сектору и подсвечивает нужные элементы схемы плюс показывает цену в сплывающей подсказке. То есть должно быть так: навел на сектор, он выделился цветом и появилась подсказка с ценой.

Суть проблемы:

Но проблема в том, что между SVG-элементами есть промежутки. И когда курсор находится между элементами, то подсказка пропадает, и сектор теряет синюю окраску. Если мы будем вести курсор вдоль сектора, то подсказка будет постоянно то появляться, то исчезать из-за промежутков между элементами.

Есть какие-либо идеи по этому поводу?

Заранее выражаю огромную благодарность всем, кто поможет.

Answer 1

[lagudal]

Если я правильно понял, первое, что приходит в голову - сектора в svg каждый, которые должны выделяться, в один составной контур, и под этим контуром белую подложку. И 2 этих элемента - составной и под ним - в одну группу с каким то css классом. А этому классу уже зававать поведение, можно через css, или js

Answer 2

[Moskus]

https://websitebeaver.com/how-to-make-an-interacti...
И да, нужно не на весь SVG вешать события, а на отдельные секторы, каждый из которых объединен в составной контур, включающий габаритный контур.

Comments

[Никита Егоров]

Наоборот, правильной практикой использовать один обработчик события и юзать делегирования.
Или нет?

[Moskus]

Никита Егоров, вопрос не в архитектуре обработчика, а в том, чтобы не заниматься бредом вроде проверки координат.

[Никита Егоров]

Moskus,
Координаты? Можно ведь просто использовать closest('section').

И кстати вопрос вроде другом. Между рядами есть пустое место, и надо проверить к какой секции это пустое место относится.

[Moskus]

Никита Егоров, я на эту часть вопроса также ответил.