Javascript 带有填充的SVG圆弧不响应悬停

我正在使用带有Datamaps.js的D3.js创建一个地图，显示国家之间的航线。到目前为止，我已经能够创建地图，以SVG的形式绘制一条弧，并添加自定义插件功能，以便在我用鼠标悬停在地图上时能够做出响应

唯一的问题是，当我将鼠标悬停在弧的内部以及边界上时，会触发悬停功能：

我想修改它，使悬停栏只在我鼠标点击实际圆弧时触发。我假设这是在实例化SVG时必须进行的修改，但是如果我可以使用数据映射对其进行更改，那就更好了

---

请告诉我如何做到这一点。

通过更改与arc SVG关联的指针事件，可以通过简单的CSS实现这一点的解决方案。假设SVG path元素有一个类，如“datamaps arc”，向CSS添加以下代码行应该可以解决问题：

.datamaps-arc {
    pointer-events:visibleStroke;
}

---

了解有关如何操作SVG的指针事件目标的更多信息

检查以确保圆弧的填充属性设置为“无”。