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

【问题标题】：SVG shape transparency with solid color as a background以纯色为背景的 SVG 形状透明度
【发布时间】：2014-10-20 09:18:44
【问题描述】：

我有一个 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 标签的绿色背景，我怎样才能使圆圈真正透明以便它可以显示为一个孔（在这种情况下它将是白色的，因为页面背景是白色的），以明确这是我想要显示的内容：

有什么办法可以做到这一点？

【问题讨论】：

标签： html svg shape

【解决方案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>

【讨论】：

圆圈的笔画被移除了，你怎么能在笔画仍然附着的情况下做到这一点？
您需要自己在孔周围画一个圆圈。即在最后一个矩形元素之后添加一个圆圈。
谢谢！有用！我添加了一些蒙版层，用于圆圈的颜色（例如，红色，50% 透明）和笔触

【解决方案2】：

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

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

<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>

【讨论】：