Question

I am having problems detecting mouseover events on SVG path elements. It seems that the smaller the strokeWidth for the path element, the less success I have in detecting the mouseover.

Also, I am using jquery-svg plugin to do the drawing.

Below is a fiddle of trying to detect using a jquery mouseover event on the path element.
Mouseover Fiddle

Below is a fiddle of trying to detect by attaching a mousemove listener to svg, then using document.getElementFromPoint.
getElementFromPoint Fiddle

Neither of these seem to work reliably, especially if the mouse is moving fast. Is it possible to make either of these more sensitivity to better detect the mouseover? Or perhaps a better way of doing this?

Answer 1

The way browsers work, you don’t get mouseover events continuously, but you get one each time the operating system updates the cursor position. And if the mouse is moving fast, you will get a events a few pixels apart. The mouse doesn’t slide over the document, it jumps. Here’s a jsfiddle showing where each event occurs. There’s nothing that you can do to get mouseover events for all the elements between two consecutive positions of the cursor.

You could do something different: remember the previous location of the mousemove event, compute the line between that point and the current mouse position, and compute all the intersections between this line and all the other shapes in the document. But that is going to be resource-intensive, since there’s no API available for that, you’ll have to compute intersections yourself. There is a library that can help you.