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)这类指向内部<mask></mask>元素的写法，哪怕<mask></mask>就在当前HTML里。这不是ID没写对，也不是路径错了，是Firefox根本没实现这个语法分支。
常见错误现象：Computed面板里mask-image显示为none，控制台零报错，Chrome/Safari一切正常。
- 必须把
<mask></mask>定义在当前HTML文档内（不能放外部SVG文件） -
<mask></mask>元素需显式设置x、y、width、height，且不能依赖overflow: visible来撑开范围 - 更稳妥的做法：改用
mask-image: url("data:image/svg+xml;utf8,...")内联编码
SVG <mask></mask>里fill为空或none会导致全黑
Firefox对<mask></mask>内容的解析极其严格——如果里面用了fill="none"、fill=""，或者压根没写fill，它会直接把整个遮罩当成纯黑处理，结果就是目标元素完全不可见。
而Chrome/Safari可能宽容地按默认fill="black"渲染，造成“看起来正常”的假象。
立即学习“前端免费学习笔记（深入）”；
-
<mask></mask>内部所有图形（<rect></rect>、<circle></circle>、<path></path>等）必须显式声明fill="white"（显示区）或fill="black"（隐藏区） - 避免
fill="transparent"或fill="rgba(0,0,0,0)"，它们在Firefox中等价于黑色 - 若用渐变做遮罩，确保
<lineargradient></lineargradient>里的<stop></stop>也带明确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编码：空格、引号、
<code>>等字符必须百分号编码，否则解析中断 - 如果SVG含
<use></use>或<defs></defs>，确保所有引用都在同一<svg></svg>上下文内，不能跨<symbol></symbol>间接调用
为什么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要求<mask></mask>的viewBox和实际使用尺寸匹配。哪怕width/height设对了，viewBox="0 0 100 100"却用在200×200的元素上，遮罩也会缩放错位——它不像clip-path那样自动适配。
