There is an SVG element like this -

<path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(100,100)scale(0.8)" style="fill: rgb(0, 0, 0);"></path>

Now, this element is so small that hovering over it is very hard.

How can I increase the hover area (keeping the area of this element same) so that even if the mouse points about say 2 px away, the hover event gets fired?

There is an SVG element like this -

<path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(100,100)scale(0.8)" style="fill: rgb(0, 0, 0);"></path>

Now, this element is so small that hovering over it is very hard.

How can I increase the hover area (keeping the area of this element same) so that even if the mouse points about say 2 px away, the hover event gets fired?

• javascript
• css
• events
• svg
• hover

2 Answers 2

My recommendation is to create another svg element that is completely transparent that is over that object that handles the hover events. For example

<path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(100,100)scale(2.0)" style="fill: rgb(0, 0, 0, 1.0);"></path>

I don't know if increasing the hover area on an element the way you describe is possible. (If it is I would love to know how.)

Increase your Stroke width and make Stroke Opacity to 0. If 0 doesn't work then make it 0.01