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），直接查看蒙版形状是否符合预期
