增加SVG元素的悬停区域

Question

有一个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像素的位置，也会触发悬停事件？

- Cute_Ninja

Answer 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>

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

- floomby

---

不需要调整变换，只需给它一个不可见的描边，宽度与您所需相同。 - Paul LeBeau

这是一个例子：http://xn--dahlstrm-t4a.net/svg/interactivity/hover-invisible-stroke-compat.svg （当鼠标光标靠近形状不到20像素时，悬停效果会触发）。 - Erik Dahlström

Answer 2

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

- Harpreet Singh

---

当描边宽度与悬停区域无关时，为什么这是被接受的答案？ - Bojidar Stanchev

增加描边宽度可以扩大可悬停的区域，但这并不是一个好的解决方案。如果SVG已经使用描边进行视觉效果，则无法使用此方法。 - HankScorpio