html - svg 后面的一个按钮

Question

在 html 文档中，我有一个 svg 图像，后面有一个按钮。 svg 有一个洞，所以我可以看到按钮，但我无法点击它。为什么会发生这种情况以及如何单击该 div(在本例中为#blue)

这是我在 html 中看到的(绿色是 svg，蓝色是我在 html 中添加的 div):

(我用 Inkscape 打开 svg，我确定有一个洞，不仅仅是透明的。出于不同的原因，按钮必须在后面，我不能把它放在上面)

#blue {
    position: absolute;
    top: 150px; left: 150px;
    width:200px; height: 200px;
    font-size:16px;
    cursor:pointer;
    background-color:blue;
    z-index: 0;
}

#green {
    position: absolute;
    z-index: 1;
}

<div id="blue"></div>
<img id="green" src="1.svg">

Answer 1

我想 svg 将始终表现为矩形元素，即使有孔或透明元素也是如此。我认为您应该尝试 clip-path 来创建孔并能够单击后面的链接:

#blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  font-size: 16px;
  cursor: pointer;
  background-color: blue;
  z-index: 0;
}

#blue:hover {
  background: red;
}

#green {
  position: absolute;
  z-index: 1;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 22% 75%, 23% 100%, 100% 100%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 22% 75%, 23% 100%, 100% 100%, 100% 0%);
}

<div id="blue"></div>
<svg width="200" height="200" id="green">
  <rect width="200" height="200" style="fill:green;" />
</svg>

你也可以在没有 svg 的情况下这样做:

#blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  font-size: 16px;
  cursor: pointer;
  background-color: blue;
  z-index: 0;
}

#blue:hover {
  background: red;
}

#green {
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: 1;
  background:green;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 22% 75%, 23% 100%, 100% 100%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 22% 75%, 23% 100%, 100% 100%, 100% 0%);
}

<div id="blue"></div>
<div id="green"></div>