Safari中SVG元素hover时box-shadow被截断的问题排查

针对Safari浏览器里SVG元素hover状态下box-shadow被截断的问题（静态设置阴影正常，仅hover时出现截断，Chromium及Firefox无此问题），以下几种方案可在保留box-shadow的前提下解决该问题：

方案一：显式设置overflow并预留阴影空间 #

Safari默认可能会将SVG的overflow设为hidden，导致hover时的阴影被SVG自身边界裁剪。通过显式开启overflow: visible，并预留少量空间容纳阴影，即可解决截断：

svg {
  border-radius: 50%;
  overflow: visible; /* 允许阴影超出SVG边界显示 */
  padding: 1px; /* 预留阴影的1px空间，避免被父元素截断 */
  box-sizing: border-box; /* 确保padding不改变SVG整体尺寸 */
}

svg:hover {
  box-shadow: 0px 0px 0px 1px #5030FF;
}

方案二：将box-shadow转移到父元素 #

如果SVG自身的渲染限制难以绕过，可以把hover阴影的逻辑转移到父容器上，避开Safari的SVG渲染bug：

div {
  display: inline-block;
  border-radius: 50%;
  padding: 1px; /* 对应阴影宽度，避免阴影被父元素裁剪 */
}

div:hover {
  box-shadow: 0px 0px 0px 1px #5030FF;
}

svg {
  border-radius: 50%;
  display: block; /* 消除SVG默认的行内元素间距 */
}

方案三：触发硬件加速强制重绘 #

给SVG添加transform属性触发Safari的硬件加速，可强制浏览器重新计算渲染区域，解决阴影截断问题：

svg {
  border-radius: 50%;
  transform: translateZ(0); /* 触发硬件加速，修复渲染逻辑 */
}

svg:hover {
  box-shadow: 0px 0px 0px 1px #5030FF;
}

补充说明 #

Safari对SVG的box-shadow渲染逻辑与其他浏览器存在差异，尤其是在动态状态（如hover）下，容易将阴影限制在SVG的viewBox或元素边界内。上述方案通过调整渲染规则、转移阴影载体或强制重绘，均可绕过该渲染bug，同时保留box-shadow的使用。

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