javascript - 在鼠标悬停的 SVG 路径周围添加区域

Question

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

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

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

(给路径加padding好像不行)

Answer 1

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

然后将 mouseover 和 mouseout 监听器附加到 fatter 行。

在这里 fiddle :http://jsfiddle.net/henbox/u0vz96qe/1/

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

.fatpath {
    ...
    opacity:0.1;
}

为 opacity:0;