svg 结合 可实现兼容性更好、支持 alpha 通道的半透明渐变遮罩；其原理是依据蒙版内图形亮度（白=全显，黑=全隐，灰=半透），通过 mask="url(#id)" 或 css mask: url(#id) 应用，支持方向、形状与反向控制。
SVG <mask></mask> 可以精准控制元素的透明区域，配合线性渐变（<lineargradient></lineargradient>）就能实现平滑、可控的半透明渐变遮罩效果，比 CSS 的 mask-image 兼容性更好，且支持精细的 alpha 通道控制。
基础结构：用 <mask></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><stop offset="100%" stop-color="#fff"></stop></lineargradient><rect width="100%" height="100%" fill="url(#fadeGrad)"></rect></mask></defs></svg>
注意：<mask></mask> 放在 <defs></defs> 中，SVG 可设为宽高 0 隐藏，不影响布局。
应用蒙版：通过 mask 属性绑定
把蒙版作用到任意 SVG 元素或 HTML 元素（需用 CSS）：
- 对 SVG 元素（如
<image></image>、<g></g>）：添加mask="url(#fadeMask)" - 对 HTML 元素（如
<div> 或图片）：用 CSS 写 <code>mask: url(#fadeMask);（需加-webkit-mask前缀兼容旧版 Safari） - 确保目标元素尺寸明确，否则蒙版可能拉伸失真
- 顶部淡出：
x1="0" y1="0" x2="0" y2="1"+ 黑→白垂直渐变 - 中心羽化：改用
<radialgradient></radialgradient>，cx/cy="50%" r="80%" - 局部半透：把
<rect></rect>换成<circle></circle>或<path></path>，只在特定区域应用渐变 - 反向遮罩（保留边缘）：把
stop-color改为白→黑，即offset="0%" #fff→offset="100%" #000 - 蒙版坐标默认相对被遮罩元素自身（
maskUnits="userSpaceOnUse"可改为绝对坐标） - 避免在蒙版里使用滤镜（
<fexxx></fexxx>），部分浏览器解析不稳定 - 调试时可临时把
fill改为纯色（如#f00），直接查看蒙版形状是否符合预期
进阶技巧：控制渐变方向与透明范围
只需调整 <lineargradient></lineargradient> 的 x1/y1/x2/y2 和 <stop></stop> 的 offset，就能灵活定制遮罩形态：
兼容性与注意事项
SVG Mask 在所有现代浏览器中稳定支持（Chrome、Firefox、Safari、Edge），IE 不支持；若需兼容 IE，可降级为 CSS background-gradient + opacity 模拟，但无法实现真正基于 alpha 的混合。
