How do I change the blue to transparent?

.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;
}

      <button class="exit" type="button" aria-label="Close">
        <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>
      </button>

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>
      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <use href="#exit" />
        </svg>
      </button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<path fill="blue"> to <path fill="transparent"> on line 7

<path fill="transparent" 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" />

CodePudding user response：

You can set the opacity in your tag but as you will see in your example the blue shapes are over a red circle so I don't think adjusting the transparency will give the effect you are looking for.

<path fill="blue" opacity="50%" 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" />

I suggest that you change the way you are creating the svg to punch out the blue shapes from the red shape and then export the svg this will give you the result you are looking for, unless you want only the red circle to display?

Edit: your graphic is being made up of the following shapes from left to right overlaying each other. The furthest image to the right is your final graphic made up of the other three. So making the blue transparent will display a red circle.