javascript - SVG paths proximity detection -

javascript - SVG paths proximity detection -

i have set of svg paths , send nail events when mouse in in proximity of path. don't want proximity of rectangular box around path. possible?

you add together nail area of different (expanded) shape, or duplicate path , add together big stroke. assuming markup such as...

<svg xmlns="http://www.w3.org/2000/svg"> <path d="m169,83c75,-44 220,145 96,110c-124,-35 -171,-66 -96,-110z" class="hitarea" /> <path d="m169,83c75,-44 220,145 96,110c-124,-35 -171,-66 -96,-110z" /> </svg>

you do...

path { fill: black; stroke: green; stroke-width: 5; pointer-events: none; } path.hitarea { opacity: 0; stroke-width: 50; pointer-events: auto; } path.hitarea:hover + path { fill: red; }

or, if don't need stroke on shapes can set big transparent stroke , work.

http://jsfiddle.net/mbsch/

javascript svg