在SVG路径周围添加区域以进行鼠标悬停

Question

有没有办法在svg生成的图形中的线路径上添加区域？

我希望用户能够悬停附近,不刚过,一条线图上的线,并有鼠标悬停后的事情发生.

目前,使用我的代码,您必须鼠标悬停实际行.但是我想设置一个区域.

(在路径中添加填充似乎不起作用)

Answer 1

我的方法是path在第一个上绘制第二个,它使用相同的数据和线函数,但是透明且更大stroke-width.

然后将mouseover和mouseout听众连接到更胖的行.

在这里小提琴:http://jsfiddle.net/henbox/u0vz96qe/1/

请注意,出于演示目的,fatter行不是完全透明的.为了使它不可见,只需改变

.fatpath {
    ...
    opacity:0.1;
}

成为 opacity:0;