html - 以纯色为背景的 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>