HTML页面中标题栏与下方SVG之间出现异常白线问题求助

问题复现位置参考：

问题诱因 #

该问题仅出现在Chromium内核浏览器（Chrome、Opera均基于Chromium开发）中，由两个渲染特性叠加导致：

• 第一是inline SVG的默认布局间隙：SVG默认属于inline/inline-block级元素，浏览器会为这类行内元素预留文本基线对齐所需的下行偏移空间，即使未设置任何边距，也会在元素上下产生1px左右的隐形间隙，不同浏览器内核的行内元素布局规则存在差异，因此Edge浏览器未复现该问题。
• 第二是亚像素渲染的抗锯齿偏差：你的布局中标题栏高度使用了12vh相对单位，SVG在适配不同屏幕尺寸缩放时，元素边界刚好落在非整数像素的位置，Chromium的抗锯齿算法会对两个相邻同色元素的边缘做半透明处理，叠加后就会呈现出类似白线的缝隙，属于Chromium移动端模拟模式下的常见渲染问题。

修复方案（可选） #

你可以任选一种方案快速解决：

• 给SVG添加样式display: block，直接消除行内元素的基线间隙
• 给SVG添加样式margin-top: -1px，直接覆盖缝隙位置
• 给父容器#tosHeader设置背景色为var(--lx-light-orange)，就算存在间隙也会被同色背景覆盖，完全不可见

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