网站移动端SVG分段分隔器出现间隙，如何消除该问题？

我在两个设置了height:100vh的区块之间添加了SVG波浪分隔器，但在移动端视图下，SVG末端和下一个区块的起始位置有一处微小间隙，请问该如何消除？

移动端效果说明：

• 间隙截图：SVG的紫粉色部分与下方区块间存在细微间隙，粉色较淡易与白色背景融合，需仔细观察
• 另一视角截图：可更清晰看到间隙位置

打开在线示例后切换至移动端视图即可复现该细微间隙

HTML代码 #

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <body>
      <section id="sec1">
        section1
      </section>
      <div class="spacer layer_wave"></div>
      <section id="sec2"></section>
    </body>
  </body>
</html>

CSS代码 #

#sec1 {
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgb(128, 141, 214);
  display: flex;

  /*Font*/
  font-family: "Open Sans", sans-serif;
}

#sec2 {
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #e3d8de;
  display: flex;

  /*Font*/
  font-family: "Open Sans", sans-serif;
}

.layer_wave {
  background-image: url("layer_wave.svg");
}
.spacer {
  aspect-ratio: 960/300;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

解决方案 #

这种间隙通常是SVG本身的空白边距、浏览器渲染的小数像素对齐问题或背景图像的定位精度导致的，可尝试以下几种方法：

1. 微调SVG容器的位置 #

给.spacer添加微小的负margin，向下偏移一点覆盖间隙：

.spacer {
  /* 保留原有样式 */
  margin-bottom: -1px;
}

根据间隙大小调整数值（比如-0.5px或-2px），避免过度遮挡下方区块。

2. 修正SVG文件的空白区域 #

• 用矢量编辑工具（如Figma、Illustrator）打开SVG，选中波浪路径，调整画布大小让路径完全贴合边缘
• 或直接修改SVG代码中的viewBox属性，确保它刚好包裹波浪图形，无多余留白

3. 让SVG背景与下方区块颜色衔接 #

给.spacer添加与下方区块相同的背景色，填充可能出现的缝隙：

.spacer {
  /* 保留原有样式 */
  background-color: #e3d8de; /* 和sec2的背景色一致 */
}

即使有微小间隙，也会被同色背景覆盖，视觉上完全消失。

4. 使用transform微调位置 #

用translateY向下偏移容器，避免margin带来的布局影响：

.spacer {
  /* 保留原有样式 */
  transform: translateY(1px);
}

根据实际间隙大小调整偏移量。

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