SVG Path Hit-Testing

Question

У меня возникают проблемы с обнаружением событий mouseover на элементах пути SVG. Похоже, что чем меньше ширина штриха для элемента пути, тем меньше у меня успеха при обнаружении мыши.

Кроме того, я использую плагин jquery-svg для рисования.

Ниже приведена скрипка поиска с использованием события jQuery mouseover на элементе пути. Mouseover Fiddle

Ниже приведена скрипка попыток обнаружить, подключив прослушиватель mousemove к svg, а затем используя document.getElementFromPoint. getElementFromPoint Fiddle

Ни один из них не работает надежно, особенно если мышь движется быстро. Можно ли сделать одну из этих более чувствительных, чтобы лучше обнаружить наведение? Или, может быть, лучший способ сделать это?

Answer 1

Как работают браузеры, вы не получаете mouseover событий непрерывно, но получаете их каждый раз, когда операционная система обновляет позицию курсора. И если мышь движется быстро, вы получите события на несколько пикселей друг от друга. Мышь не слайд над документом, оно прыгает. Here's a jsfiddle показывает, где происходит каждое событие. Нет ничего, что можно сделать, чтобы получить mouseover событий для всех элементов между двумя последовательными позициями курсора.

Вы можете сделать что-то другое: помните предыдущее местоположение события mousemove, вычислите линию между этой точкой и текущей позицией мыши и вычислите все пересечения между этой линией и всеми другими фигурами в документе. Но это будет ресурсоемким, так как для этого нет API, вам придется самостоятельно вычислять перекрестки. Существует library, который может вам помочь.