Firefox不支持mask: url(#mask)内部SVG引用，需将内联、显式设置宽高和fill值，并用mask-image: url("data:image/svg+xml;utf8,...")替代。
Firefox不认url(#mask)这种SVG引用写法
Firefox会静默忽略mask: url(#mask)或-webkit-mask: url(#mask)这类指向内部
常见错误现象：Computed面板里mask-image显示为none，控制台零报错，Chrome/Safari一切正常。
- 必须把
-
x、y、width、height，且不能依赖overflow: visible来撑开范围 - 更稳妥的做法：改用
mask-image: url("data:image/svg+xml;utf8,...")内联编码
SVG fill为空或none会导致全黑
Firefox对fill="none"、fill=""，或者压根没写fill，它会直接把整个遮罩当成纯黑处理，结果就是目标元素完全不可见。
而Chrome/Safari可能宽容地按默认fill="black"渲染，造成“看起来正常”的假象。
-
fill="white"（显示区）或fill="black"（隐藏区） - 避免
fill="transparent"或fill="rgba(0,0,0,0)"，它们在Firefox中等价于黑色 - 若用渐变做遮罩，确保
stop-color，比如stop-color="white"
用mask-image: url()加载外部SVG时Firefox静默失败
Firefox不支持通过url("mask.svg")加载外部SVG文件作为遮罩图，即使该SVG可直连访问、CORS配置正确，它也会跳过加载、不报错、不渲染。
这和图片资源加载失败不同——它根本不会发请求，DevTools Network面板里看不到任何mask.svg的记录。
- 唯一可靠方式：把SVG内容转成
data:image/svg+xml;utf8,URI并内联写死 - 注意URL编码：空格、引号、
>等字符必须百分号编码，否则解析中断 - 如果SVG含
或上下文内，不能跨
为什么mask-mode: luminance比alpha更稳
虽然mask-mode: alpha听起来更直观，但它在Firefox以外浏览器支持度极差——Safari至今不识别，Chrome只在部分版本里实验性支持。而luminance是默认模式，所有支持mask-image的浏览器都强制走这条路。
关键点在于：你提供的遮罩图必须是「亮度可解释」的，而不是依赖透明度。
- 用PNG做遮罩时，关掉透明背景，导出为白底+黑形；别指望Alpha通道自动映射
- 用SVG时，所有
fill值用#fff/#000，别用hsl()或rgba() - 写
linear-gradient()遮罩，必须用mask-image: linear-gradient(to right, #fff, #000)，transparent会被当#000处理
最易被忽略的是：Firefox要求viewBox和实际使用尺寸匹配。哪怕width/height设对了，viewBox="0 0 100 100"却用在200×200的元素上，遮罩也会缩放错位——它不像clip-path那样自动适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
