raphael - 为 Raphael 路径添加填充/边界以对鼠标悬停事件宽大处理

Question

考虑一个用 Raphael 绘制的路径（它是一条线），它带有一个将光标设置为悬停的 mouseover 事件。对于细路径/线，很难将鼠标悬停在该路径上。

有没有办法为路径添加不可见的边框/填充/边界，以便更容易将鼠标悬停在路径上？

Answer 1

实现这一点的一个非常简单的方法如下：

1. 使用 复制您用作悬停触发器的路径element。clone
2. 使用 将克隆移动到当前路径的前面element。insertAfter
3. 使用element. attr将克隆的不透明度设置为略高于 0，这样它实际上是不可见的，但仍会接收单击事件，并具有等于原始路径的 stroke-width + 您所需的边距的 stroke-width 属性；
4. 将悬停事件添加到克隆的元素。

这将为您提供一个比原始路径更粗的不可见路径，它能够接收鼠标事件来代替原始的、更细的路径。

我在这里对此进行了模拟，并设置了光标属性，因此当鼠标悬停在代理路径上时，您会看到十字准线。