HTML5下SVG蒙版Mask实现半透明渐变遮罩的方案

SVG <mask> 结合 <linearGradient> 可实现兼容性更好、支持 alpha 通道的半透明渐变遮罩；其原理是依据蒙版内图形亮度（白=全显，黑=全隐，灰=半透），通过 mask="url(#id)" 或 CSS mask: url(#id) 应用，支持方向、形状与反向控制。

SVG <mask> 可以精准控制元素的透明区域，配合线性渐变（<linearGradient>）就能实现平滑、可控的半透明渐变遮罩效果，比 CSS 的 mask-image 兼容性更好，且支持精细的 alpha 通道控制。

基础结构：用 <mask> 包裹渐变定义

蒙版本身不直接渲染，只定义“哪些像素可见”。关键在于：蒙版内图形的亮度（Luminance）决定目标元素对应位置的不透明度——白色（#fff）= 完全显示，黑色（#000）= 完全隐藏，灰色 = 半透明。

典型写法：

<svg width="0" height="0">  <defs>    <mask id="fadeMask">      <linearGradient id="fadeGrad" x1="0" y1="0" x2="1" y2="0">        <stop offset="0%" stop-color="#000" />        <stop offset="100%" stop-color="#fff" />      </linearGradient>      <rect width="100%" height="100%" fill="url(#fadeGrad)" />    </mask>  </defs></svg>

注意：<mask> 放在 <defs> 中，SVG 可设为宽高 0 隐藏，不影响布局。

立即学习“前端免费学习笔记（深入）”；

应用蒙版：通过 mask 属性绑定

把蒙版作用到任意 SVG 元素或 HTML 元素（需用 CSS）：

• 对 SVG 元素（如 <image>、<g>）：添加 mask="url(#fadeMask)"
• 对 HTML 元素（如 <div> 或图片）：用 CSS 写 mask: url(#fadeMask);（需加 -webkit-mask 前缀兼容旧版 Safari）
• 确保目标元素尺寸明确，否则蒙版可能拉伸失真

进阶技巧：控制渐变方向与透明范围

只需调整 <linearGradient> 的 x1/y1/x2/y2 和 <stop> 的 offset，就能灵活定制遮罩形态：

• 顶部淡出：x1="0" y1="0" x2="0" y2="1" + 黑→白垂直渐变
• 中心羽化：改用 <radialGradient>，cx/cy="50%" r="80%"
• 局部半透：把 <rect> 换成 <circle> 或 <path>，只在特定区域应用渐变
• 反向遮罩（保留边缘）：把 stop-color 改为白→黑，即 offset="0%" #fff → offset="100%" #000

兼容性与注意事项

SVG Mask 在所有现代浏览器中稳定支持（Chrome、Firefox、Safari、Edge），IE 不支持；若需兼容 IE，可降级为 CSS background-gradient + opacity 模拟，但无法实现真正基于 alpha 的混合。

• 蒙版坐标默认相对被遮罩元素自身（maskUnits="userSpaceOnUse" 可改为绝对坐标）
• 避免在蒙版里使用滤镜（<feXXX>），部分浏览器解析不稳定
• 调试时可临时把 fill 改为纯色（如 #f00），直接查看蒙版形状是否符合预期