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

我有一个 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

You can see the circle is transparent but it still has the green background from the svg tag, how can I make the circle really transparent so it can appear as a hole (in this case it will be white since the page background is white), to make it clear this is what I want to display:

有什么办法可以实现这一点吗？

你可以使用面膜。在这里您可以看到红色背景穿过矩形。

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