如何用线性渐变蒙版实现SVG底部20%区域淡出效果？

要实现前80%区域完全不透明、最后20%逐渐过渡到透明的效果，核心是正确配置线性渐变和蒙版的关联，以下是可直接复用的实现代码：

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义渐变和蒙版 -->
  <defs>
    <!-- 线性渐变：前80%保持白色（完全显示），后20%从白过渡到黑（逐渐隐藏） -->
    <linearGradient id="fadeGradient" y1="0%" y2="100%" gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="1" />
      <stop offset="80%" stop-color="#ffffff" stop-opacity="1" />
      <stop offset="100%" stop-color="#000000" stop-opacity="1" />
    </linearGradient>
    
    <!-- 蒙版：使用上述渐变填充矩形 -->
    <mask id="bottomFadeMask" maskContentUnits="objectBoundingBox">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#fadeGradient)" />
    </mask>
  </defs>

  <!-- 应用蒙版的目标图形（示例用矩形，可替换为你的元素） -->
  <rect x="50" y="50" width="300" height="200" fill="#42b983" mask="url(#bottomFadeMask)" />
</svg>

关键配置说明 #

• 渐变方向：y1="0%"、y2="100%"设置垂直方向渐变，确保从顶部到底部过渡。
• 渐变停止点：
  • 0%到80%的停止点都设为白色且完全不透明，对应图形前80%区域完全显示；
  • 80%到100%从白色过渡到黑色，对应图形最后20%区域透明度从1平滑降到0。
• 蒙版单位：maskContentUnits="objectBoundingBox"让蒙版尺寸相对目标图形的边界，无需手动计算绝对坐标，适配性更强。
• 蒙版应用：给目标元素添加mask="url(#bottomFadeMask)"属性，即可绑定蒙版效果。

如果之前设置未生效，大概率是这几个问题：

• 渐变的gradientUnits或蒙版的maskContentUnits配置错误，导致渐变范围和图形不匹配；
• 渐变停止点的offset或颜色设置错误，比如把透明方向搞反了；
• 蒙版未正确关联到目标元素，或者蒙版内的填充未引用渐变。

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