从设计工具导出的 SVG 放到页面上完全空白,选中能看到 24×24 的占位框,开发者工具里 fill 的值是 none。日志里能对上时间点,这种反而好排。

导出时勾了轮廓化或者把描边转成了路径,fill 被写成 none,只剩 stroke,而 stroke 的颜色又和背景接近。这种文件单独打开也看不到。这一点先确认清楚,后面就不用反复试。

<svg viewBox='0 0 24 24' fill='currentColor'>
  <path d='M12 2 2 22h20z'/>
</svg>

「SVG fill none」确认了原因之后,改动尽量只碰那一处,顺手改的东西后面最容易出问题。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。

别只看报错的最后一行,往上看几行,真正的起因通常在上面。同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。

处理上按这个顺序:打开 SVG 源码看 fill 和 stroke 的实际取值;把 fill 改成 currentColor 或者具体色值 需要描边的再补 stroke;改完分别放到亮色和暗色背景上看一眼 确认两种情况都可见。

结果对不对很好判断,图标在页面上正常显示,换背景色也能看清轮廓。

作者 9823189