SVG存在镂空但遮挡后方可点击元素#blue的原因与解决方法

哈哈，这个问题我之前做SVG交互的时候也踩过坑！让我给你拆解下原因和解决办法：

你遇到的问题本质是浏览器对<img>标签加载的SVG的处理逻辑：不管SVG内部有没有镂空或者透明区域，<img>作为一个「替换元素」，它的整个边界框都会被浏览器视为可交互区域，会拦截所有落在这个范围内的点击事件。再加上你的#green的z-index比#blue高，所以哪怕视觉上能看到下层的蓝色div，点击事件都会被上层的<img>先截住，根本传不到下面的#blue上。

根据你的需求，分两种场景给你对应办法：

场景1：SVG只是纯装饰，不需要任何交互 #

这是最简单的情况，直接给#green加一行pointer-events: none样式就行：

#green { 
  position: absolute; 
  z-index: 1; 
  pointer-events: none; /* 关键：让元素不捕获任何交互事件 */
}

这个属性会让#green完全忽略点击、鼠标悬停等所有交互，点击会直接“穿透”它，落到下层的#blue上，完美满足你「#blue在后方但能被点击」的需求。

场景2：SVG的实体部分需要交互，镂空部分允许穿透 #

如果你需要SVG里的非镂空图形能响应点击，同时镂空区域可以点到下面的#blue，那就要把SVG内联到HTML中（不能用<img>引用）：

1. 把1.svg里的完整代码直接复制到HTML里，替换原来的<img>标签，比如：

<div id="blue"></div>
<svg id="green" width="xxx" height="xxx" viewBox="xxx">
  <!-- 这里粘贴1.svg里的所有内容，比如<path>、<g>等元素 -->
</svg>

2. 给SVG的根元素设置pointer-events: none，然后给里面实际需要交互的图形元素（比如<path>、<circle>）设置pointer-events: auto：

<svg id="green" ... style="position: absolute; z-index: 1; pointer-events: none;">
  <path d="..." style="pointer-events: auto; fill: green;" />
  <!-- 其他需要交互的图形同理设置 -->
</svg>

这样一来，只有SVG的实体图形部分会拦截点击，镂空的区域会让点击穿透到下面的#blue上，同时也保留了SVG本身的交互能力。

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