Question

Consider a path (which is a line) drawn out with Raphael with a mouseover event that sets the cursor to hover. For a thin path/line it is difficult to hover the mouse over that path.

Is there a way to add an invisible border/padding/boundary to the path so that it is easier to hover over the path?

Answer 1

A really simple way to accomplish that would be as follows:

1. Duplicate the path you’re using as a hover trigger with element.clone
2. Move the clone in front of the current path with element.insertAfter
3. Use element.attr to set the clone’s opacity to just above 0, so that it is effectively invisible but still receives click events, and to have a stroke-width property equal to the original path’s stroke-width + your desired margin;
4. Add your hover events to the cloned element.

This will give you a invisible path much thicker than the original that is capable of receiving mouse events in place of the original, thinner path.

I’ve mocked this up here, with a cursor property set so you’ll see crosshairs when the mouse is over the surrogate path.