如何将悬停仅应用于 X 而不是圆圈

Question

我怎样才能将悬停过渡应用到 X 而不是圆？

如何在代码中完成？ https://jsfiddle.net/c2sah0x6/

悬停时只有 X 会改变颜色，圆圈不会。

我怎样才能做到这一点？

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

Answer 1

为此，您需要打破 2 中的路径：圆圈和 4 个扇区。在代码示例中，基圆填充为黄色，4 个扇区填充为红色。

接下来我在两条路径之间画了一个圆圈（黑色填充）。该圆圈仅在 4 个扇区下方可见。

悬停时您需要更改此圆圈的颜色：

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>

观察：为了能够将路径拆分为 2，我使用这支笔将 d 属性更改为所有绝对路径：https://codepen.io/leaverou/pen/RmwzKv

如何将悬停仅应用于 X 而不是圆圈

How to apply hover to only the X not the circle

css

svg

path

hover

css-transitions