如何移除包含SVG的div元素出现的1px多余线条？

架构老林

2026-8-28

修复容器与波浪SVG间的1px多余间隙

问题参考

问题实际展示效果：查看问题截图

问题成因

这个1px线条不是容器高度计算错误导致的，是浏览器渲染SVG矢量路径时的亚像素抗锯齿偏移，让白色波浪和上方深色容器背景之间出现了肉眼可见的细缝，因此单纯修改高度、内边距等盒模型属性无法修复。

修复方案

以下方案任选其一即可生效，优先推荐前两种偏移类方案：

方案1：给SVG添加负顶部外边距（实现最简单，全浏览器兼容）
修改现有CSS中.wave-container svg的样式，新增margin-top: -1px即可：

.wave-container svg {
  display: block;
  transform-origin: bottom;
  animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  /* 新增下方属性覆盖缝隙 */
  margin-top: -1px;
}

方案2：通过相对定位上移SVG（不影响文档流布局，适合负margin打乱周边元素排版的场景）
如果负边距影响了其他元素的位置，可以换用定位偏移实现同等效果：

.wave-container svg {
  display: block;
  transform-origin: bottom;
  animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  /* 新增下方两个属性覆盖缝隙 */
  position: relative;
  top: -1px;
}

方案3：关闭SVG抗锯齿渲染（备选方案，仅当前两种方案在个别低版本浏览器存在残留时使用）

.wave-container svg {
  display: block;
  transform-origin: bottom;
  animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
  /* 新增下方属性关闭抗锯齿 */
  shape-rendering: crispEdges;
}