使SVG形状的完整边界区域可单击

Question

我有一个SVG地图，上面有一些需要点击的引脚。此外，只要用户将鼠标悬停在桌面上的某个引脚上，就会激活一个小动画。我的问题是它只是接收事件的实际形状，这是有问题的，因为引脚在其中心有一个小“洞”，所以如果用户徘徊或点击引脚的中心没有任何反应。有没有办法在用户点击或悬停在形状的边界框上时触发事件，即。在检查器中查看元素时，该区域是否有轮廓，或者我是否必须使用隐形框或其他“hacky”解决方案扩展实际的SVG？

Answer 1

是的，你需要在顶部添加一个不可见的矩形。您需要将该矩形设置为pointer-events: fill，以便即使它不可见也会获得点击事件。