SVG mask 采用灰度图逻辑：白色显示、黑色隐藏、灰色半透明；必须定义在中并用mask="url(#id)"引用，内部图形需设fill="white"才能透出内容。
SVG mask 不是 CSS 遮罩，也不是 clip-path，它用的是灰度图逻辑：白色显示、黑色隐藏、灰色半透明——这点不搞清，后面所有效果都会“看起来没反应”。
为什么加了 <mask></mask> 却没遮罩效果？
最常见原因是：mask 元素没被正确引用，或 mask 内容本身不可见（比如用了默认黑色填充但没设 fill）。
-
<mask></mask>必须定义在<defs></defs>里，且需通过mask="url(#myMask)"显式挂载到目标元素上 - mask 内部图形默认是黑色（即全隐藏），记得显式设置
fill="white"才能“透出”内容 - mask 元素自身不渲染，只起规则作用；它的坐标系默认和引用它的元素一致，不是整个 SVG 画布
- 别用 PNG 当 mask 源——SVG
<mask></mask>只接受内部矢量图形或<image></image>（后者需注意跨域和 MIME 类型）
mask 和 clip-path 的关键区别在哪？
clip-path 是硬裁剪（非黑即白），mask 支持 alpha 通道——这是做渐变遮罩、毛玻璃边缘、文字镂空发光等效果的唯一可行路径。
-
clip-path只认形状轮廓，不响应 opacity 或 fill-opacity；mask把每个像素的 RGBA 值转为 alpha 值（R+G+B 总和归一化） - 想让图片边缘淡出？用
<lineargradient></lineargradient>填充 mask 矩形，比 JS 控制 canvas alpha 简单得多 - 文字作为遮罩时：
<text fill="white">MASK</text>可直接用，但得确保字体已加载完成，否则 mask 区域为空白
如何用 CSS 控制 SVG mask 的显示/隐藏？
不能直接对 <mask></mask> 元素设 display: none 或 opacity: 0——它不参与渲染流。要切换遮罩，只能操作引用它的元素的 mask 属性。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：用 CSS 自定义属性 +
attr()（兼容性有限），或更稳妥地用 JS 切换 class 并在 CSS 中覆盖mask - 例如：
.no-mask { mask: none; } .with-mask { mask: url(#fadeMask); } - 动画 mask 效果（如滚动视差遮罩）必须用
<animatetransform></animatetransform>或 requestAnimationFrame 操作 mask 内部图形的transform，而非 mask 本身
真正难的不是写对标签，而是理解 mask 的“灰度即透明度”映射逻辑——调错一个 fill 值，整块区域就消失；用错坐标系，mask 就偏移出界。动手前先在 DevTools 里单独预览 mask 内容，比反复刷新快得多。
