为什么我的 svg 面罩部分透明？

Question

I have the following svg code:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" fill="rgb(20, 182, 197)" fill-opacity="100%"></rect>
      <circle cx="50" cy="50" r="37.5"></circle>
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" mask="url(#mask)"  fill="rgb(20, 182, 197)" ></rect>
</svg>

It basically creates a rectangle with a cutout circle, but the part with the non cutout part is partially transparent.

How do i fix this?

Answer 1

With masks, the transparency is determined by the brightness. You are setting the rectangle's color to rgb(20, 182, 197) , which has a 43% luminescence value, so you get 43% transparency. If you need the outer rectangle to be opaque, then you have to set its color to have 100% brightness (ie white).

So, change

<rect x="0" y="0" width="100" height="100" fill="rgb(20, 182, 197)" fill-opacity="100%">

to

<rect x="0" y="0" width="100" height="100" fill="white">