SVG mask通过灰度值（#000至#fff）控制透明度，需定义在中并设唯一id；用可实现左右、上下或中心羽化等方向性淡出效果。

在 H5 中用 SVG `` 实现渐变透明度遮罩，核心是利用灰度映射控制每个像素的显示强度：白（#fff）完全显示，黑（#000）完全隐藏，灰度值线性决定透明度。它比 CSS `clip-path` 更精细，能做出羽化、淡出、镂空发光等真实 alpha 遮罩效果。

必须把 mask 定义在 里并显式设 fill

SVG `` 不是直接画出来就能用的图形，它必须放在 `

• 用 `` 表示“默认全显”
• 若想局部渐变，就在这个 `` 上叠加 `` 或 ``，但渐变色只能用十六进制灰度（如 `#000`、`#808080`、`#fff`），不能用 `rgba()` 或 `transparent`
• 整个 `` 标签需有唯一 `id`，例如 ``

用渐变填充 mask 实现方向性淡出

最常用方式是用 `` 控制遮罩灰度走向。关键看 `stop-color` 的黑白顺序和坐标方向：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 从左到右淡出（内容左侧清晰、右侧渐隐）：
  

  <linearGradient x1="0%" y1="0%" x2="100%" y2="0%"><br>  <stop offset="0%" stop-color="#fff"/><br>  <stop offset="100%" stop-color="#000"/><br></linearGradient>

• 顶部淡出（如标题栏向下渐隐）：改 `y1="0%" y2="100%"`，保持 `#fff → #000` 垂直渐变
• 中心羽化（中间清晰、边缘柔和）：换 ``，同样用灰度 stop

HTML 元素引用 mask 的两种可靠方式

定义好 `` 后，要让它生效，需挂载到目标元素上。推荐以下兼容性最好的写法：

• CSS 方式（推荐）：对普通 HTML 元素（如 `
  `、``）加样式
  

  mask: url(#fadeMask);<br>-webkit-mask: url(#fadeMask);

  
  注意：`url(#id)` 里的 `#id` 必须和 `` 一致；`
• SVG 属性方式：如果目标本身是 SVG 元素（如 ``、``），直接写属性：
  <image href="..." mask="url(#fadeMask)"></image>

避坑要点：别踩这些常见错误

很多效果不生效，其实卡在细节上：

• 没给 `` 内部图形设 `fill` → 默认黑 → 整块消失
• 在渐变里用了 `rgba(0,0,0,0.5)` 或 `transparent` → Safari/Firefox 解析失败，降级为全黑或全白
• 忘记把 `
• 用 `mask-image: linear-gradient(...)` 替代 SVG 引用 → 浏览器兼容性差（Firefox 不支持，Safari 要求纯灰度），不如 SVG 稳定