SVG裁剪路径与mask的透明度处理有什么区别

我第一次把 SVG 的圆形裁剪换成渐变透明时，最容易混淆的地方就是：两段代码都像是在“把图形藏起来”，但 clipPath 处理的是几何可绘制区域，mask 处理的是合成时的可见度。需要硬边界就用裁剪路径，需要羽化、渐变显隐或局部半透明就用 mask。

官方参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath

这篇只比较 SVG 内的 、、mask-type 与对应 CSS 属性，不把两者当成可以互换的视觉滤镜。

先看硬边界：clipPath 不负责渐变透明

定义的是一个裁剪区域，引用它的元素只有落在这个区域内的绘制内容才会显示；区域外相当于没有被绘制。它适合圆形头像、斜切卡片、波浪轮廓这类“在或不在”的边界。

下面的例子把同一块彩色内容套到圆形裁剪路径上。圆外的像素直接消失，圆边不会因为裁剪路径里的 fill-opacity 而自然变成半透明。

这里的边界是二值的：像素在圆内就保留，圆外就不参与绘制。元素本身的几何边界也不会因为裁剪而变成另一个真实的圆形盒子；这也是裁剪路径和改变元素几何形状的区别。

需要半透明时：mask 把颜色或 alpha 变成可见度

不是简单的几何开关，而是参与当前对象与背景的合成。白色区域通常表示更可见，黑色区域表示隐藏，灰色或带透明度的区域可以产生中间可见度，因此渐变边缘、光晕、擦除效果更适合 mask。

下面把遮罩内容写成显式的白到透明渐变，并指定 mask-type="alpha"。这时真正控制显隐的是遮罩内容的 alpha 通道，颜色本身不会成为亮度判断条件。

如果把 stop-color 改成黑白渐变，却没有指定 alpha 模式，结果就可能受亮度参与方式影响。也就是说，mask 的“灰度”和“透明度”不是同一个概念，必须先确定遮罩模式。

透明度为什么会不一样：alpha 与 luminance 是两条规则

SVG 的 mask 可以通过 mask-type 指定模式。alpha 主要看遮罩内容的透明度；luminance 则把颜色的亮度和 alpha 一起纳入可见度计算。MDN 对 SVG 的记录中，默认值是 luminance，因此在需要稳定表达“透明度数值”时，我更愿意显式写出 mask-type="alpha"。

实际项目里不要只凭“看起来差不多”选择模式：纯色渐变、带透明度的图像、滤镜结果和多层遮罩的组合，都会让默认 luminance 带来与预期不同的结果。把模式写在 SVG 里，后续维护者才能知道这段 mask 是按亮度还是按 alpha 工作。

我在项目里怎么选：先看边界，再看交互

还有一个容易遗漏的交互点：被裁剪掉的区域默认不会派发指针事件，所以不要把“元素原始盒子”当成“用户能点击的区域”。如果按钮的可点击范围必须和视觉轮廓一致，应同时检查 pointer-events、布局盒子和无障碍名称，而不是只看图片边缘。

我的经验是，先用 clipPath 解决明确的几何边界；只有出现“边缘要淡出”“不同区域要有不同透明度”时，才换成 mask。这样既避免为了一个圆角引入遮罩合成，也能避免拿 clipPath 硬凑渐变透明。

常见追问

clipPath 能不能直接做半透明边缘？

不适合。它的核心语义是限制可绘制区域，通常得到硬边界；需要连续透明度时，应把透明度交给 mask、渐变或其他合成手段。

mask 为什么有时“白色显示、黑色隐藏”不准确？

因为还要看 mask-type。alpha 模式读取透明度，luminance 模式还会读取颜色亮度；当遮罩颜色、alpha 和滤镜叠加时，显隐强度不能只按黑白经验判断。