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>

它创建类似这样

您可以看到圆圈是透明的,但它仍然具有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>