Safari 9/10/11中SVG溢出区域指针事件失效问题求助

这个问题我之前在兼容旧版Safari时也踩过坑——旧版Safari对SVG的overflow: visible和点击事件的处理逻辑很严格：哪怕你设置了overflow: visible让内部图形超出SVG边界显示，超出部分仍然不会响应点击事件，因为Safari会把点击检测的范围限制在SVG元素的自身边界内，不管图形是否溢出。

最直接的解决方案：调整pointer-events属性 #

核心思路是让点击事件直接穿透SVG元素，交给内部的图形元素处理，绕过Safari对SVG边界的点击限制：

1. 修改SVG的pointer-events为none，让SVG本身不拦截点击事件
2. 确保内部图形元素的pointer-events设置为visiblePainted或auto，保证它们能响应点击

修改后的CSS代码如下：

#counter { font-size: 2em; }
#starSvg { 
  pointer-events: none; /* 关键修改：让SVG不拦截点击 */
  overflow: visible; 
  position: absolute; 
  left: 200px; 
  top: 250px; 
  border: 1px solid red; 
}
#starPolygon { 
  overflow: visible; 
  fill: rgba(0, 153, 219, 1); 
  pointer-events: visiblePainted; /* 确保图形能接收点击 */
  stroke-width: 4; 
  stroke-linecap: square; 
  stroke-linejoin: round; 
  stroke: rgba(219, 0, 153, 1); 
  cursor: pointer; 
}

原理说明 #

旧版Safari中，当SVG设置pointer-events: auto（默认值）时，浏览器会强制将点击检测范围限定在SVG的视口内。把SVG的pointer-events设为none后，点击事件会直接“穿过”SVG，浏览器会直接检测内部图形元素的实际形状范围，哪怕图形超出SVG边界，也能正常触发点击事件。

补充注意事项 #

• 如果SVG内部有多个图形元素（circle、path等），可以给它们统一加一个类，批量设置pointer-events: visiblePainted，不用逐个修改
• 如果需要SVG本身也响应点击，可以给SVG套一个尺寸足够大的父容器（能包含所有溢出图形），父容器设置pointer-events: none，SVG和内部图形保持上述设置即可

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