Using mask, how to make color transparent

[javascriptcoding5678]

Does anyone know how to do this?

All I want to do is change the blue color to transparent.

https://jsfiddle.net/o64znkc5/

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  clip-path: circle(50%);

}

.exit svg {
  fill: red;
}

<svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>
            <path fill="red" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
            <circle cx="0" cy="0" r="113" />
            <path fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
          </g>
        </svg>

[ChaoticDawg]

You can add the fill-opacity attribute to the <path/>. It takes a value from 0.0 (transparent) to 1.0 (opaque).

Example (0.5 50% transparent):

<path fill="blue" fill-opacity="0.5" d="m-101.116-101.116m169.705........" />

Remember though that this will show red if fully transparent as that is the color the blue area is over. If you want that area to also be transparent you’ll need to do a bit more work.

[javascriptcoding5678]

In the code here, the circle is hoverable using mask to make the blue color transparent. https://jsfiddle.net/zu9ajgpt/

I added a hover here to only the “X” https://jsfiddle.net/vp8shwf3/

Using mask , how do I make the blue color transparent?

Keeping the hover on the " X " how do I use the masking code to make the blue color transparent?