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创建孔并能够单击后面的链接：

<div id="blue"></div>
<svg width="200" height="200" id="green">
  <rect width="200" height="200" style="fill:green;" />
</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%);
}

你也可以在没有svg的情况下做到这一点：

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

#hover-content {
    display:none;
}

#hover-me:hover #hover-content {
    display:block;
}
#hover-me:hover {
    opacity: 0.8;
 }

Answer 2

目前尚不清楚您是希望整个SVG让点击还是只是漏洞。

如果您对SVG <img>对点击完全不可见感到满意，那么只需设置pointer-events="none";。

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