How would I be able to apply the hover transition to only the X and not the circle?

How would that be done in the code? https://jsfiddle.net/c2sah0x6/

Only the X should change color on hover, not the circle.

How would I be able to do that?

.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%;
  animation: fadeInExit 0s forwards 0s;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit svg {
  fill: red;
  transition: fill 3s ease;
}

.exit:hover svg {
  fill: green;
}

<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 class="exitHover" d="m-143 0a143 143 0 1 1 286 0 143 143 0 0 1 -286 0m128-112a113 113 0 0 0 -97 97h97zm-97 127a113 113 0 0 0 97 97v-97zm127 97a113 113 0 0 0 97 -97h-97zm97-127a113 113 0 0 0 -97 -97v97z" transform="rotate(45)"/>
          </g>
        </svg>
      </button>

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

CodePudding user response：

For this you will need to breake the path in 2: the circle and the 4 sectors. In the code example the base circle is filled yellow and the 4 sectors are filled red.

Next I draw a circle between the 2 paths (filled black). This circle is visible only under the 4 sectors.

On hover you need to change the color of this circle:

circle:hover{fill:green}

 <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit" transform="rotate(45)">
            <title>exit</title>
            <path class="exitHover" d="M-143,0A143,143,0,1,1,143,0A143,143,0,0,1,-143,0" fill="gold"/>
                                       
                                       
             <circle r="113" />
             
             
             <path class="exitHover" fill="red" d="M-15,-112A113,113,0,0,0,-112,-15H-15ZM-112,15A113,113,0,0,0,-15,112V15ZM15,112A113,113,0,0,0,112,15H15ZM112,-15A113,113,0,0,0,15,-112V-15Z" />
          </g>
        </svg>

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

Observation: in order to be able to split the path in 2 I've changed the d attribute to all-absolute path using this pen: https://codepen.io/leaverou/pen/RmwzKv