增加 SVG 元素的悬停区域

Posted 2023-03-06

【中文标题】增加 SVG 元素的悬停区域

【英文标题】：Increase hover area of SVG element

【发布时间】：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，悬停事件也会被触发？

【参考方案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 已经将笔画用于视觉目的，则不能使用它。