javascript - 悬停时更改 SVG 圆形平铺世界地图上区域的颜色

Question

我正在尝试制作一张由包含许多圆圈的 svg 制成的世界地图。我基于我在这里找到的代码笔:https://codepen.io/mvaneijgen/pen/NRzENO

例如

<svg viewBox="0 0 845.2 458">
    <circle class="st0" cx="826.1" cy="110.3" r="1.9"/>
    <circle class="st0" cx="819.3" cy="110.3" r="1.9"/>
    <circle class="st0" cx="819.3" cy="117.1" r="1.9"/>
    <circle class="st0" cx="812.6" cy="90" r="1.9"/>

map 很棒。我一直在使用类将其划分为有色大陆区域。当鼠标悬停时，这些会改变颜色。到目前为止一切都很好。我的大部分功能都在那里。

问题是您必须直接将鼠标悬停在一个圆圈上才能使颜色发生变化。我正在使用 javascript 鼠标悬停事件来更改颜色。

有什么方法可以增加圆形元素周围的效果区域吗？也许在后面或前面放一个看不见的方 block ？我仍在掌握前端的东西，这里的任何指示都会很棒。

Answer 1

这是正确的想法:每个圆圈后面都有透明的 rect。 (或基于地理数据的透明大陆形路径，具体取决于您的目标。)

诀窍是使用 SVG CSS 属性 pointer-events .将其设置为 fill 或 all 应该可以解决问题。