增加SVG元素的悬停区域

时间:2014-07-08 01:46:59

标签: javascript css3 events svg hover

有一个像这样的SVG元素 -

<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>

现在,这个元素非常小,在它上面盘旋非常困难。

如何增加悬停区域(保持此元素的区域相同),以便即使鼠标指向2 px左右,也会触发悬停事件?

2 个答案:

答案 0 :(得分:7)

增加描边宽度并将描边不透明度设为 0 。如果 0 无效,请将其设为 0.01

答案 1 :(得分:4)

我的建议是创建另一个完全透明的svg元素,该元素位于处理悬停事件的对象上。例如

<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>

我不知道是否可以按照您描述的方式增加元素上的悬停区域。 (如果是,我很想知道如何。)