如何停用 SVG 元素中的元素，就像它不存在一样

如何解决如何停用 SVG 元素中的元素，就像它不存在一样

我有一张 SVG 地图，上面有很多层（地点）和文字。 我想为位置添加 hover 效果，但是每当 curser 出现在文本上（位于位置上方）时，hover 效果就会消失。 有没有办法停用文本元素（已更改为曲线），就像它不存在一样？所以悬停效果不会消失？

.circle{
  position:absolute;
  top:100px;
  left:50px;
  width:100px;
  heigth:100px;
  background-color:red;
  border-radius:50px;
  text-align:center;
}
.background{
  width:200px;
  height:200px;
  background-color:gray;
  display:flex;
  justify-content:center;
  align-items:center;
}
.background:hover{
  background-color:white;
}

<div class="background">
</div>

  <div class="circle">001</div>

在本例中，background-element 是我的地图，001 element 是我的弯曲文本。

解决方法

你的圈子需要在你的背景中。

<div class="background">
  <div class="circle">001</div>
</div>