SVG中g元素:hover仅在内部path被hover时触发，如何让背景hover也生效？

这个问题我之前做SVG交互时也碰到过——SVG里的<g>本身是个无实体的容器元素，默认没有自己的可点击区域，鼠标事件只会落到它的子元素（比如你用到的path）上，所以hover只有在path上才会触发。给你几个实用的解决思路：

• 方法一：添加透明背景矩形（兼容性最优方案）
  给你的<g>元素最底部插入一个<rect>，让这个矩形完全覆盖你期望的hover区域，设置fill="transparent"确保它看不见，但能接收鼠标事件。示例代码如下：

  <g class="hoverable">
    <!-- 放在子元素最前面，避免遮挡其他图形 -->
    <rect x="0" y="0" width="150" height="100" fill="transparent" />
    <!-- 你原本的path等元素 -->
    <path d="M10,10 L140,10 L140,90 L10,90 Z" fill="#ccc" />
  </g>
  

  如果不确定<g>的精确尺寸，可以用JavaScript的getBBox()方法获取它的边界框，动态设置rect的x、y、width、height；要是你的<g>是基于整个SVG视口的，直接给rect设width="100%" height="100%"就行。

• 方法二：使用CSS pointer-events: bounding-box（现代浏览器专属）
  现代浏览器支持pointer-events: bounding-box这个CSS属性，给你的hover类加上它：

  .hoverable {
    pointer-events: bounding-box;
  }
  

  这个属性会让<g>的鼠标事件触发区域变成它的边界包围盒，不管内部有没有实际图形，只要鼠标在这个盒子范围内，就能触发hover效果。不过要注意，旧版IE和一些老浏览器不支持这个属性，要是你的项目需要兼容这些环境，还是优先用方法一。

• 方法三：给设置viewBox（适合固定布局场景）
  要是你的<g>对应一个固定的区域，可以给它设置viewBox属性，再配合pointer-events: all，不过这个方法操作起来不如前两种直观，一般只在特定布局下用。

内容的提问来源于stack exchange，提问作者v-moe