admin管理员组

文章数量:1221302

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
Share Improve this question asked Jul 8, 2014 at 1:46 AshimaAshima 4,8246 gold badges41 silver badges64 bronze badges 0
Add a comment  | 

2 Answers 2

Reset to default 12

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

本文标签： javascriptIncrease hover area of SVG elementStack Overflow

版权声明：本文标题：javascript - Increase hover area of SVG element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739317749a2157885.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。