如何让SVG关闭按钮中X形图标之间的空白区域可触发hover效果

问题根因 #

当前hover选择器绑定的是<path>元素本身，X形path仅覆盖了4块红色填充区域，中间空白区域不属于path的触发范围，因此悬停空白处无法触发效果。

解决方案 #

将hover事件的监听对象改为外层的button元素，只要鼠标落在按钮的圆形范围内，就修改内部path的填充色，HTML代码无需改动，仅需调整CSS即可：

.exit {
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
}

/* 修改选择器：监听按钮的hover状态，修改内部path的填充色 */
.exit:hover .exitHover {
  fill: green;
}

/* 可选优化：禁止SVG内部元素拦截鼠标事件，避免出现异常交互 */
.exitsvg {
  pointer-events: none;
}

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