如何为整个SVG添加hover效果 而非仅作用于path元素

问题原因 #

你当前的实现存在两个核心问题：

1. 选择器svg :hover（svg与:hover之间存在空格）匹配的是SVG内部子元素的悬浮状态，只有鼠标触碰到path这类有描边/填充的子元素时才会生效，SVG中间的空白区域不属于任何子元素，自然无法触发规则。
   注意svg :hover（带空格）和svg:hover（不带空格）是完全不同的匹配规则，前者匹配SVG内部的悬浮子元素，后者匹配SVG元素本身的悬浮状态
2. 默认情况下SVG的空白区域不会接收鼠标事件，需要额外配置让整个SVG区域响应悬浮操作。

常用实现方案 #

方案1：修改选择器+给SVG添加透明背景（推荐，无需修改SVG文件） #

直接将悬浮事件绑定到SVG元素本身，只要鼠标进入SVG的可视区域就触发效果，同时给SVG加透明背景捕获鼠标事件：

/* 基础配置：让SVG整个区域可接收鼠标事件 */
svg {
  background-color: transparent;
  /* 若之前有设置pointer-events: none需改为auto，默认场景不需要额外加这行 */
}
/* 过渡效果放在path默认样式上，鼠标移入移出都有平滑动画 */
svg path {
  transition: fill 0.2s ease;
}
/* 悬浮到SVG任意区域时修改path填充色 */
svg:hover path {
  fill: #fff;
}

方案2：SVG内部添加透明占位层（适合不能修改CSS的场景） #

如果不方便修改CSS代码，可以直接在SVG文件的最底层（所有path元素之前）添加一个覆盖全区域的透明矩形，让空白区域也能被鼠标检测到：

<svg ...你的原有SVG属性>
  <!-- 新增透明占位矩形，放在所有元素最底层 -->
  <rect width="100%" height="100%" fill="transparent" />
  <!-- 原有path等元素 -->
  <path ... />
</svg>

添加后你原本的svg :hover代码也可以正常触发空白区域的悬浮效果。

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