SVG形状透明度以纯色为背景 [英] SVG shape transparency with solid color as a background

问题描述

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

I have an svg container which I used as a background, and inside it a circle is drawn

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

basically, this is what I've done:

<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标签的绿色背景，
如何我可以让圆圈真的透明，因此它可以显示为一个洞（在这种情况下它会是白色的，因为页面背景是白色的），为了清楚这是我要显示的内容：

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:

有什么办法可以解决这个问题？

Is there any way that can make this happen?

推荐答案

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

You could use a mask. Here you can see the red background cut through the rect.

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

这篇关于SVG形状透明度以纯色为背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！