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

Question

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

我希望用户能够将悬停在附近，而不仅仅是在折线图上的一条线上，并在鼠标悬停后发生事情。

目前，根据我的代码，您必须将鼠标悬停在实际行上。但是我想设置一个区域。

（在路径中添加填充似乎不起作用）

Answer 1

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

然后将mouseover和mouseout侦听器附加到更胖的行。

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

请注意，出于演示目的，fatter行不是完全透明的。要使其不可见，只需更改

即可

.fatpath {
    ...
    opacity:0.1;
}

为opacity:0;