Efficient way to find point on a svg stroke closest to the current mouse point?

Question

As user moves mouse cursor near the strokes of svg path I would like to display a circle on a stroke at the point closest to current mouse point. The only solution comes to mind is to manually parse SVG data and find closest point checking all segments of the path. Implementation of this is quite involving and potentially too slow. I could draw transparent stroke on top of current stroke with larger width and use SVG hit testing capabilities to detect that point is close to the stroke but is there any way to determine corresponding 'central' point of the stroke?

Answer 1

Interesting, but too involving problem to be solved here. You will probably need to do some calculations on your own. You might find method getPointAtLength to be useful. If you are comfortable of using some library like D3, you can find some helping functions there as well. I think very good approach to solve this is to segment your path and use Voronoi tessellation. You can find the code and demo here:

https://bl.ocks.org/mbostock/8027835