部分屏幕尺寸下SVG顶部出现白条纹如何解决？

问题描述 #

设置了一个红色背景div，其后紧跟一个以SVG为背景的.wave类div，调整浏览器窗口尺寸时，SVG顶部偶尔会出现一条细小的白线条。

当前使用的代码如下：

HTML代码 #

<div style="background-color:red;width:100%;height:100px">

</div>
<div class="wave">
  hallo
</div>

CSS代码 #

.wave {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1440 320"><path fill="red" d="M0,96L80,85.3C160,75,320,53,480,90.7C640,128,800,224,960,266.7C1120,309,1280,299,1360,293.3L1440,288L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"/></svg>');
  height:180px;
  background-size:100%;
  background-repeat: no-repeat;
  margin-top:-20px;  
  background-color:white;
}

解决方法 #

这种白线是浏览器渲染时的亚像素精度问题导致的——SVG缩放时边缘和上方div的红色背景无法完全对齐，露出了.wave的白色背景。可以通过以下几种方式解决：

• 微调SVG垂直位置：给.wave添加background-position: center top -1px;，让SVG向上偏移1像素，覆盖可能出现的缝隙。
• 移除或修改.wave背景色：如果下方不需要白色背景，直接删掉background-color:white;，缝隙处会透出上方的红色；如果需要保留背景，可将背景色改为和上方div一致的红色。
• 使用transform偏移：给.wave添加transform: translateY(-1px);，比margin偏移更精准，不会影响布局。
• 调整SVG路径范围：修改SVG的路径，让顶部线条稍微超出原viewBox范围，确保缩放时能完全覆盖缝隙。

推荐第一种简单方案，修改后的CSS代码如下：

.wave {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1440 320"><path fill="red" d="M0,96L80,85.3C160,75,320,53,480,90.7C640,128,800,224,960,266.7C1120,309,1280,299,1360,293.3L1440,288L1440,0L1360,0C1280,0,1120,0,960,0C800,0,640,0,480,0C320,0,160,0,80,0L0,0Z"/></svg>');
  height:180px;
  background-size:100%;
  background-repeat: no-repeat;
  margin-top:-20px;  
  background-color:white;
  background-position: center top -1px; /* 添加该行 */
}

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