如何用SVG正弦波遮罩父容器背景，隐藏上半部分绿色？

核心思路 #

利用SVG的<mask>元素定义遮罩规则：让正弦波下方的区域保持可见，上方区域被完全遮罩（绿色背景不可见）。遮罩的核心逻辑是：白色区域对应完全显示内容，黑色区域对应完全隐藏内容，灰色区域对应半透明显示。

完整代码实现 #

HTML结构 #

<div class="parent-container">
  <!-- 容器内的内容 -->
  <p>这里是容器内的文本内容</p>
  
  <!-- SVG遮罩组件 -->
  <svg class="wave-mask" viewBox="0 0 1440 100" preserveAspectRatio="none">
    <defs>
      <mask id="waveMask">
        <!-- 黑色矩形覆盖整个容器，作为默认隐藏层 -->
        <rect width="100%" height="100%" fill="#000"/>
        <!-- 白色正弦波路径，定义需要显示的区域（波下方的范围） -->
        <path d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80C1248,75,1344,53,1392,42.7L1440,32L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z" fill="#fff"/>
      </mask>
    </defs>
    <!-- 应用遮罩的矩形，尺寸与父容器完全匹配 -->
    <rect width="100%" height="100%" mask="url(#waveMask)"/>
  </svg>
</div>

CSS样式 #

.parent-container {
  position: relative;
  width: 100%;
  min-height: 300px;
  background-color: #2ecc71; /* 目标绿色背景 */
  overflow: hidden;
}

.wave-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 可选：提升内容层级，避免被遮罩层覆盖 */
.parent-container > p {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 2rem;
}

关键细节说明 #

• SVG路径与适配：viewBox="0 0 1440 100"定义了SVG的坐标系统，路径d是生成的正弦波路径，可自行调整参数修改波高、波长；preserveAspectRatio="none"保证波浪能自适应容器宽度。
• 遮罩逻辑验证：黑色矩形默认隐藏整个容器的绿色背景，白色波浪路径填充的区域会“穿透”遮罩，让对应位置的绿色背景显示出来。
• 内容层级：给容器内的内容设置z-index:1，确保内容不会被SVG遮罩层遮挡。

替代方案（使用clip-path） #

如果更倾向于使用clip-path实现，可直接用SVG的<clipPath>定义显示区域：

<div class="parent-container">
  <p>这里是容器内的文本内容</p>
  <svg class="wave-clip" viewBox="0 0 1440 100" preserveAspectRatio="none">
    <defs>
      <clipPath id="waveClip">
        <path d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,64C960,75,1056,85,1152,80C1248,75,1344,53,1392,42.7L1440,32L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z"/>
      </clipPath>
    </defs>
    <rect width="100%" height="100%" clip-path="url(#waveClip)" fill="#2ecc71"/>
  </svg>
</div>

对应的CSS调整：

.parent-container {
  position: relative;
  width: 100%;
  min-height: 300px;
  background-color: transparent;
  overflow: hidden;
}

.wave-clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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