SVG弧与填充不响应悬停

Question

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

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

When my cursor is where the arrow is, the hover bar is triggered.

我想修改它，以便仅在鼠标实际弧时触发悬停条。我认为这是我在实例化SVG时必须进行的修改，但如果我可以使用Datamaps进行更改，那就更好了。

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

Answer 1

通过更改与arc SVG关联的指针事件，可以通过简单的CSS实现此解决方案。假设您的SVG路径元素有一个类，例如＆＃34; datamaps-arc＆＃34;，将以下代码行添加到CSS应该可以解决问题：

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

详细了解如何操作SVG here的指针事件目标。