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 code works for this, but I found rgba doesn't work. The shapes become invisible. I tested this on Chrome and Firefox.

Am I missing something else here?

Answer 1

The circle is almost white and also partially transparent, you just can't see it against a white background.

On a black background you can see it's rendered perfectly OK by both Firefox and 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>