How do I make svg path hover area bigger

Question

What I have:

#poly-1:hover {
    stroke: green;
}

If I hover exactly on path, which is a tricky task, line it will change color to green.

What I want to do is to make hover area of this path bigger, so I could move my cursor somewhere +-5px near the path area and it will still change color.

The only two ways I know I could do is:

Make stroke-width bigger, but I don't want its actual size with red color to increade.
With my main path create invisible duplicating path that has bigger stroke-width and add condition that if I hover on it - my main path will change color.

But there is any simple way to do it?

user_7897395 · Answer

This answer is practically your second option.

I'm putting the path #poly-1 in the defs and use it first with a wide stroke-width and no stroke. In order to make it sensitive to the mouse I'm using pointer-events="stroke"

Next comes another use - the visible one - with a red stroke.

I'm putting both use elements in a group. The stroke of the second use element changes when I'm mousing over the group.

#group .use {
  stroke: red
}

#group:hover .use {
  stroke: green;
}

user_13368658 · Answer

I added stroke width for color change to highlight. please try this..

#poly-1:hover {
    stroke: green !important;
    stroke-width:2px;
}

How do I make svg path hover area bigger

2 Answers