调整浏览器大小时SVG顶部间歇性出现白线问题排查求助

核心原因 #

这个是Chromium内核（Chrome、Edge均基于该内核）特有的SVG渲染bug，单独打开SVG时不会触发，嵌入页面后跟随容器尺寸变动才会出现，具体触发逻辑如下：

• 子像素舍入误差：调整窗口大小时，浏览器会对SVG的尺寸、位置做浮点运算，当运算结果出现小于1px的偏差时，SVG内部渲染区域和画布边缘无法完全对齐，偏差位置就会露出SVG的背景色，你把SVG背景改成红色后细线同步变红完全符合这个特征。
• 适配属性匹配偏差：SVG默认的preserveAspectRatio参数在页面容器尺寸比例和SVG自身比例不完全匹配时，Chromium的渲染逻辑会在边缘产生1px以内的空隙，单独打开SVG时容器比例和SVG完全适配，不会触发该问题。
• 元素对齐偏差：如果SVG内部最顶部的元素刚好对齐到画布y=0的位置，浮点计算时元素顶部被判定为大于0，空出来的缝隙就会显示为背景色细线。

可行的修复方案 #

• 给SVG添加shape-rendering: geometricPrecisionCSS属性，强制内核使用高精度渲染，禁用默认的像素对齐优化，90%以上的同类问题都可以通过该方法解决。
• 将SVG的背景色设置为和内部顶部元素一致的颜色，即使出现缝隙也不会有视觉差。
• 调整SVG内部顶部元素的位置，让其向上超出画布0.5~1px，直接覆盖可能出现的缝隙。
• 给SVG的外层容器添加overflow: hidden，同时将SVG的高度设置为比外层容器高1px，向上偏移1px，直接剪掉可能露出的边缘区域。
• 可以尝试调整SVG的preserveAspectRatio参数为xMidYMid slice，不过需要确认调整后不会裁切需要展示的SVG内容。

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