如何实现SVG任意区域悬停变色？底层SVG触发异常排查

你遇到的问题根源是z-index:-1把svg2放到了父元素wrapper的堆叠上下文下方，导致svg2的上半部分要么被svg1覆盖，要么被父元素的层级挡住，鼠标事件传不到svg2上。下面给你两种可行的解决方案：

方案一：利用pointer-events实现鼠标穿透（推荐） #

核心思路是让上层svg的空白区域允许鼠标穿透，同时保留自身路径的交互能力，不需要依赖z-index:-1：

修改后的CSS代码：

.wrapper {
  position: relative;
  width: 50%;
}

svg {
  stroke-width: 1;
  fill: lightblue;
  position: absolute;
}

/* 悬停整个SVG时，内部路径变色 */
svg:hover path {
  fill: blue;
}

#svg1 {
  top: 0;
  left: 0;
  /* 让SVG空白区域不拦截鼠标事件，允许穿透到下层 */
  pointer-events: none;
}

/* 恢复路径的鼠标交互能力 */
#svg1 path {
  pointer-events: auto;
}

#svg2 {
  top: 100px;
  left: 0;
  /* 移除z-index:-1，保持正常堆叠层级 */
}

效果说明：

• 鼠标悬停在svg1的路径上时，svg1的路径会变色；
• 鼠标悬停在svg1的空白区域时，事件会穿透到svg2，触发svg2的路径变色；
• svg2的整个区域都能正常响应hover，不会再出现只有下半部分可用的情况。

方案二：添加透明覆盖层触发全区域hover #

如果希望SVG的整个 viewBox范围（包括空白区域）都能触发变色，可以给每个SVG内部添加一个覆盖整个画布的透明矩形，确保鼠标能在任意位置触发hover：

修改后的HTML代码（给每个SVG添加rect）：

<div class="wrapper">
  <svg id="svg1" viewBox="0 0 100 100">
    <!-- 透明覆盖层，占满整个SVG区域 -->
    <rect width="100" height="100" fill="transparent" pointer-events="all"/>
    <path d="
             M2,50
             A50,10 0 0,0 98,50
             A50,10 0 0,0 2,50
             L2,75
             A50,10,0 0,0 98,75
             L98,50             
             " style="stroke:#660000;" />
  </svg>
  <svg id="svg2" viewBox="0 0 100 100">
    <rect width="100" height="100" fill="transparent" pointer-events="all"/>
    <path d="
             M2,50
             A50,10 0 0,0 98,50
             A50,10 0 0,0 2,50
             L2,75
             A50,10,0 0,0 98,75
             L98,50             
             " style="stroke:#660000;" />
  </svg>
</div>

对应的CSS可以简化为：

.wrapper {
  position: relative;
  width: 50%;
}

svg {
  stroke-width: 1;
  fill: lightblue;
  position: absolute;
}

svg:hover path {
  fill: blue;
}

#svg1 {
  top: 0;
  left: 0;
  z-index: 2;
}

#svg2 {
  top: 100px;
  left: 0;
  z-index: 1;
}

这个方案的好处是，不管鼠标点在SVG的哪个角落（哪怕是路径外的空白），都会触发对应SVG的路径变色，同时z-index层级清晰，不会有遮挡问题。

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