rgba 不适用于 CSS 中的填充属性

Question

circle {
    fill: rgba(248, 248, 248, 0.5);
}

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

rgb 代码适用于此，但我发现 rgba 不起作用。形状变得不可见。我在 Chrome 和 Firefox 上进行了测试。

我是不是漏掉了什么？

Answer 1

圆圈几乎是白色的，而且部分透明，只是在白色背景下看不到它。

在黑色背景上，您可以看到 Firefox 和 Chrome...

都完美地呈现了它

svg {
    background-color: black;
}

circle {
    fill: rgba(248, 248, 248, 0.5);
}

<svg width='400' height='400'>
    <circle r='100' cx='200' cy='200'></circle>
</svg>

rgba doesn't work for fill property in CSS