firefox 中对 svg 元素使用 `opacity` 属性进行 css 过渡时，常出现非线性、跳跃式变化甚至短暂消失的现象；改用 `fill-opacity`（或 `stroke-opacity`）替代 `opacity` 可显著提升动画平滑度与准确性。
在 SVG 渲染中，opacity 是一个容器级属性，它作用于整个元素及其所有子内容（包括描边、填充、嵌套组等），并可能触发额外的合成层处理。Firefox 的渲染引擎（Gecko）在对 opacity 执行硬件加速过渡时，存在插值精度不足与合成时机不一致的问题，导致视觉上出现“先闪黑→突跳→再渐变”的异常行为——正如你观测到的红通道值从 23 骤降至 0、再跃升至 100 等非预期跳变。
相比之下，fill-opacity（针对填充）和 stroke-opacity（针对描边）是图形属性级控制，仅影响对应绘制通道，且在 Firefox 中由更底层的光栅化管线直接处理，支持更稳定、更高精度的线性插值。因此，对单色填充矩形这类简单 SVG 形状，优先使用 fill-opacity 是最佳实践。
✅ 正确写法如下（已验证在 Firefox 115+ 中平滑运行）：
SVG Fill-Opacity Transition
⚠️ 注意事项：
- 若 SVG 元素包含多层内容（如
组合、混合描边/填充/滤镜），请根据目标区域选择属性：纯填充用 fill-opacity，纯描边用 stroke-opacity，需整体淡入则仍可用 opacity，但建议配合 will-change: opacity 或改用 SVG 原生动画以规避浏览器兼容缺陷； - 始终为
- 避免同时设置 opacity 和 fill-opacity，否则后者会被前者乘性覆盖（最终透明度 = opacity × fill-opacity），易引发逻辑混淆。
? 总结：SVG 动画的稳定性高度依赖属性层级与浏览器实现细节。面对 Firefox 的 opacity 过渡异常，fill-opacity 不是妥协，而是更精准的语义化选择——它直击渲染目标，绕过容器合成噪声，让过渡真正“线性”起来。
