如何从 SVG 元素中停用元素，就像它不存在一样[重复]

Posted 2023-03-05

【中文标题】如何从 SVG 元素中停用元素，就像它不存在一样[重复]

【英文标题】：how to deactivate an element from a SVG Element just like it doesn't exists [duplicate]

【发布时间】：2021-09-21 16:11:57

【问题描述】：

我有一张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 是我的曲线文本。

【问题讨论】：

.circlepointer-events: none

什么？我教我试过了！！！但它仍然有效。 TNX。

【参考方案1】：

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

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

【讨论】：

Klinkgs：它是一个包含很多元素的大文件，它不可能改变元素的顺序：/