<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 240 64" preserveAspectRatio="xMidYMid meet">

同一份 logo.svg,Chrome 显示正常,Safari 里图片区域全白,控制台没有报错,把文件单独打开又能正常显示。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。

原因不复杂,文件里只有 width 和 height,没有 viewBox,Safari 缩放时算不出坐标系,干脆不画。CSS 里给了百分比宽度时更容易触发。

这次卡住的地方就在「SVG viewBox」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。

验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。

报错里带路径的,先去看那个路径在不在、权限对不对。同一份配置存在多处的,先确认改的是被加载的那一份。

处理上按这个顺序:设计工具导出时勾上 viewBox 或者手动补一行;删掉固定 width height 只留 viewBox 和 preserveAspectRatio;用 img 引用时给容器定好宽高比;Safari 里按 50% 和 200% 各看一次。

改完只确认一件事:Safari 里 logo 正常显示 缩放窗口时比例不变形。

作者 9823189