如何向下扩展SVG图形填充页面？及viewBox保比例、位置调整

问题梳理 #

• SVG曲线区块无法向下拉伸填充剩余页面，滚动后下方露出其他背景
• 修改SVG参数易导致图形变形，需掌握viewBox保持宽高比的方法
• 更新需求：将SVG向下移动，使黑色粒子背景位于其上方

一、让SVG填充剩余页面 #

当前SVG固定高度200px是核心问题，需通过CSS+SVG属性调整实现拉伸填充：

1. 父容器CSS设置 #

给.wave容器设置占满剩余视口高度的样式：

.wave {
  position: absolute; /* 适配页面已有导航/粒子背景的灵活定位方案 */
  top: 0; /* 后续下移需求可修改此值，比如粒子背景高度为500px则设为top:500px */
  left: 0;
  width: 100%;
  min-height: 100vh; /* 确保至少占满当前视口高度 */
  height: auto;
}

2. SVG属性修改 #

去掉固定高度，改为百分比高度，同时修改路径底部为相对高度：

<div class="wave">
  <svg width="100%" height="100%" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <path fill="white" d="
      M0 67
      C 273,183
        822,-90
        2525.01,98
      V 100% /* 替换原固定值359，让路径底部随SVG高度自适应 */
      H 0 
      V 67
      Z">
    </path>
  </svg>
</div>

• preserveAspectRatio="none"：允许SVG拉伸以填充容器，打破比例限制实现全屏填充
• V 100%：让路径底部对齐SVG容器底部，确保填充区域完整无间隙

二、用viewBox保持宽高比 #

若需要保持曲线的原始比例，避免拉伸变形，使用viewBox属性：

1. 确定viewBox范围 #

先获取SVG原始图形的宽高范围，比如当前路径的最大宽度为2525、最大高度为359，那么viewBox="0 0 2525 359"

2. SVG配置 #

<svg width="100%" height="auto" fill="none" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2525 359" preserveAspectRatio="xMidYMin meet">
  <path fill="white" d="
    M0 67
    C 273,183
      822,-90
      2525.01,98
    V 359
    H 0 
    V 67
    Z">
  </path>
</svg>

• preserveAspectRatio="xMidYMin meet"：设置水平居中、顶部对齐，保持比例缩放，确保整个SVG完整可见
• 若需强制填充容器，可将meet改为slice（会裁剪超出容器的部分）

三、实现SVG下移，粒子背景居上 #

1. 层级与定位调整 #

• 给粒子背景容器设置z-index: 1和position: relative，确保它在SVG上方
• 修改.wave容器的top属性，比如粒子背景高度为500px，则设置：

.wave {
  top: 500px; /* 下移至粒子背景下方 */
}

• 若页面为流式布局，也可给.wave添加margin-top: 500px替代绝对定位的top值

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