如何在路径内的圆圈上应用指针事件？答案

【问题标题】：How to have pointer events apply on the circle inside the path?如何在路径内的圆圈上应用指针事件？
【发布时间】：2021-11-12 14:42:38
【问题描述】：

如何在代码中修复它以便删除空白？

https://jsfiddle.net/k14svx2q/

我怎样才能从代码中删除空白？

有没有办法修复或调整它以消除空白？

指针事件应该只应用于路径内的“圆圈”。

.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 2s forwards 0s;
  opacity: 0;
  pointer-events: none;
}

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

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

.exit:hover .exitHover {
  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)" fill="red" />
          </g>
        </svg>
      </button>

有人建议我这样做：

<circle cx="0" cy="0" r="144" fill="transparent" />

但这不起作用：https://jsfiddle.net/vnghab8k/

.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 2s forwards 0s;
  opacity: 0;
  pointer-events: none;
}

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

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

.exit:hover .exitHover {
  fill: green;
  cursor: pointer;
}

      <button class="exit" type="button" aria-label="Close">
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <g id="exit">
            <title>exit</title>

            <circle cx="0" cy="0" r="144" fill="transparent" />
            <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)" fill="red" />
          </g>
        </svg>
      </button>

【问题讨论】：

所以您希望指针事件仅应用于该路径内的“圆圈”？为此，您实际上需要在之前有一个，然后您可以执行 circle:hover + .exitHover { fill: green; } （并放置 @987654331 @ 规则也适用于那个）。
空白到底是什么意思？我觉得不错？
这在代码中不起作用，你的建议是：jsfiddle.net/vnghab8k @Kaiido知道我指的是什么。
因为你只应用了我的建议的一半：jsfiddle.net/8egnd2ut

标签： html css svg whitespace removing-whitespace

【解决方案1】：

使圆外区域不可悬停的一种方法是使用剪辑路径将父级剪辑成一个圆：

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

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

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

.exit:hover .exitHover {
  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)" fill="red" />
          </g>
        </svg>
      </button>

【讨论】：

为什么悬停在这里不起作用？ jsfiddle.net/hnba7z0d