SVG mask 采用灰度图逻辑：白色显示、黑色隐藏、灰色半透明；必须定义在中并用mask="url(#id)"引用，内部图形需设fill="white"才能透出内容。

SVG mask 不是 CSS 遮罩，也不是 clip-path，它用的是灰度图逻辑：白色显示、黑色隐藏、灰色半透明——这点不搞清，后面所有效果都会“看起来没反应”。

为什么加了 却没遮罩效果？

最常见原因是：mask 元素没被正确引用，或 mask 内容本身不可见（比如用了默认黑色填充但没设 fill）。

• 必须定义在 里，且需通过 mask="url(#myMask)" 显式挂载到目标元素上
• mask 内部图形默认是黑色（即全隐藏），记得显式设置 fill="white" 才能“透出”内容
• mask 元素自身不渲染，只起规则作用；它的坐标系默认和引用它的元素一致，不是整个 SVG 画布
• 别用 PNG 当 mask 源——SVG 只接受内部矢量图形或 （后者需注意跨域和 MIME 类型）

mask 和 clip-path 的关键区别在哪？

clip-path 是硬裁剪（非黑即白），mask 支持 alpha 通道——这是做渐变遮罩、毛玻璃边缘、文字镂空发光等效果的唯一可行路径。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• clip-path 只认形状轮廓，不响应 opacity 或 fill-opacity；mask 把每个像素的 RGBA 值转为 alpha 值（R+G+B 总和归一化）
• 想让图片边缘淡出？用 填充 mask 矩形，比 JS 控制 canvas alpha 简单得多
• 文字作为遮罩时：MASK 可直接用，但得确保字体已加载完成，否则 mask 区域为空白

如何用 CSS 控制 SVG mask 的显示/隐藏？

不能直接对 元素设 display: none 或 opacity: 0——它不参与渲染流。要切换遮罩，只能操作引用它的元素的 mask 属性。

• 推荐方案：用 CSS 自定义属性 + attr()（兼容性有限），或更稳妥地用 JS 切换 class 并在 CSS 中覆盖 mask
• 例如：

  .no-mask { mask: none; }
  .with-mask { mask: url(#fadeMask); }

• 动画 mask 效果（如滚动视差遮罩）必须用 或 requestAnimationFrame 操作 mask 内部图形的 transform，而非 mask 本身

真正难的不是写对标签，而是理解 mask 的“灰度即透明度”映射逻辑——调错一个 fill 值，整块区域就消失；用错坐标系，mask 就偏移出界。动手前先在 DevTools 里单独预览 mask 内容，比反复刷新快得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！