如何让pointer-events仅作用于SVG path内的圆形区域，消除空白触发问题

你之前添加透明圆形的方案不生效，是因为鼠标事件是绑定在父级button上的，border-radius: 50%仅做视觉裁剪，不会限制正方形button的事件响应范围，整个按钮区域都会触发交互。以下是两种可行方案：

方案1：裁剪按钮事件响应区域（最简适配你的需求） #

直接给.exit按钮添加clip-path: circle(50%)属性，该属性会真实裁剪元素的事件响应范围，刚好匹配你需要的圆形区域，修改后的CSS如下：

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

无需修改HTML代码，添加一行属性即可生效。

方案2：精准控制SVG元素事件响应（适配复杂不规则形状） #

如果后续你要使用非圆形的不规则触发区域，可以通过调整pointer-events的作用层级实现，让仅SVG的path元素响应鼠标事件：

修改后CSS代码： #

.exit {
  top: auto;
  bottom: -47.63px;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  animation: fadeInExit 2s forwards 0s;
  opacity: 0;
  /* 按钮本身永远不响应鼠标事件 */
  pointer-events: none;
}

.exitHover {
  pointer-events: none;
  cursor: pointer;
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }
  100% {
    opacity: 1;
    pointer-events: initial;
  }
}

/* 仅当hover到path上时变色 */
.exitHover:hover {
  fill: green;
  pointer-events: auto;
}

无需修改你现有的HTML代码即可生效。

内容的提问来源于stack exchange，提问作者user17382064