增加 SVG 元素的悬停区域答案

【问题标题】：Increase hover area of SVG element增加 SVG 元素的悬停区域
【发布时间】：2014-08-28 15:19:59
【问题描述】：

有一个像这样的 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，悬停事件也会被触发？

【问题讨论】：

标签： javascript css events svg hover

【解决方案1】：

我的建议是在处理悬停事件的对象上方创建另一个完全透明的 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>

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

【讨论】：

您无需调整变换。只要给它一个看不见的笔触，就是你需要的粗细。
下面是一个例子：xn--dahlstrm-t4a.net/svg/interactivity/…（当鼠标光标距离形状小于 20px 时触发悬停效果）。

【解决方案2】：

增加您的描边宽度并将描边不透明度设为0。如果 0 不起作用，则使其 0.01

【讨论】：

当笔画宽度与悬停区域无关时，这是如何被接受的答案？
增加笔画宽度会扩大可以悬停的区域，但这不是一个很好的解决方案。如果 SVG 已经将笔画用于视觉目的，则不能使用它。