SVG形状透明度以纯色为背景

Question

我有一个svg容器，我用它作为背景，里面画了一个圆圈

基本上，这就是我所做的：

<svg width="200" height="200" style="background-color:green">
    <circle cx="100" cy="100" r="80" stroke="black" stroke-width="2" fill="transparent" />
</svg>

它会创建类似this

的内容

您可以看到圆圈是透明的，但它仍然具有svg标签的绿色背景， 如何使圆圈真正透明，以便它可以显示为一个洞（在这种情况下它将是白色的，因为页面背景是白色的），为了清楚这是我想要显示的：

有没有办法可以实现这一目标？

Answer 1

你可以使用面具。在这里，您可以看到通过矩形切割的红色背景。

<svg width="200" height="200" style="background-color:red">
    <mask id="mask">
        <rect fill="white" width="100%" height="100%"/>
        <circle cx="100" cy="100" r="80" stroke="black" stroke-width="2" fill="black" />
    </mask>
    <rect mask="url(#mask)" fill="green" width="100%" height="100%"/>
</svg>

Answer 2

我已经添加了@Rober解决方案的可见示例

＆＃13;

＆＃13;

.svgClass {
  position: absolute;
  top: 0;
}

＆＃13;

<div>
  The text should be visible within the circle
</div>

<div class="svgClass">
  <svg width="100%" height="100%" >
    <mask id="mask">
      <rect fill="white" width="100%" height="100%" fill-opacity="1" />
      <circle cx="100" cy="100" r="90" />
    </mask>
    <rect mask="url(#mask)" fill="green" width="100%" height="100%" fill-opacity="1"/>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;