CSS链式调用SVG滤镜导致图像异常变暗的问题咨询

问题确认 #

测试发现，CSS内置滤镜链式调用（如 filter: brightness(200%) brightness(200%);）可以正常叠加效果，但链式调用SVG滤镜（如 filter: url(#myIdentityFilter) url(#myIdentityFilter);）时，画面会意外变暗。该问题在Chrome 103.0.5060.134中可复现，涉及feComponentTransfer、feColorMatrix等多种SVG滤镜类型。目前通过嵌套容器分别应用滤镜可规避，但希望使用更简洁的链式语法。

核心原因：Chrome的颜色空间转换Bug #

这种变暗现象不是规范要求的行为——根据CSS滤镜规范，链式调用多个滤镜（包括SVG滤镜）应该是依次将每个滤镜作用于前一个的输出结果，恒等滤镜重复应用本应完全不改变画面。

问题根源在于Chrome的实现缺陷：SVG滤镜默认会将输入内容从设备颜色空间转换为sRGB空间处理，再转回设备空间。而sRGB是经过gamma校正的非线性空间，每次转换都会对亮度进行压缩；链式调用多次SVG滤镜时，这个转换过程会重复执行，导致亮度被持续错误压缩，最终画面变暗。而CSS内置滤镜是直接在设备颜色空间内运算，不会触发额外的颜色空间转换，因此没有这个问题。

解决方案 #

方案1：显式指定SVG滤镜的颜色插值空间 #

在SVG的<filter>标签中添加color-interpolation-filters="sRGB"属性，强制滤镜在sRGB空间内完成所有运算，避免重复的颜色空间转换：

<svg width="0" height="0">
  <filter id="identity" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <!-- 空定义，保持恒等效果 -->
    </feComponentTransfer>
  </filter>
</svg>

修改后，链式调用filter: url(#identity) url(#identity);就不会再出现变暗问题。

方案2：合并多个SVG滤镜到同一个<filter>中 #

如果需要重复应用相同的SVG滤镜逻辑，直接在单个<filter>内部组合多个滤镜元素，这样只会触发一次颜色空间转换：

<svg width="0" height="0">
  <filter id="doubleIdentity">
    <feComponentTransfer/>
    <!-- 重复添加需要的滤镜元素 -->
    <feComponentTransfer/>
  </filter>
</svg>

使用时只需调用一次：filter: url(#doubleIdentity);，效果等同于链式调用两次原滤镜，且不会变暗。

总结 #

• 链式调用SVG滤镜本应正常工作，变暗是Chrome的实现bug导致
• 两种修复方法都能实现简洁的链式/单次调用效果，无需嵌套容器
• 若需组合不同的SVG滤镜，优先使用方案1；若重复应用同一滤镜逻辑，方案2更高效

内容的提问来源于stack exchange，提问作者Don Hatch