如何设置feFuncR/G/B的slope值实现CSS亮度-100%至100%映射

核心实现思路 #

我们需要根据亮度参数t（范围：-1 对应-100%，0对应0%，1对应100%），动态设置<feFuncR>、<feFuncG>、<feFuncB>的slope和intercept属性，分两个区间处理：

1. 亮度区间：-100% ≤ 亮度 ≤ 0%（t ∈ [-1, 0]） #

从全黑过渡到原图，映射公式为：output = input * (1 + t)
对应滤镜参数：

• slope = 1 + t
• intercept = 0

2. 亮度区间：0% ≤ 亮度 ≤ 100%（t ∈ [0, 1]） #

从原图过渡到全白，映射公式为：output = input * (1 - t) + t
对应滤镜参数：

• slope = 1 - t
• intercept = t

示例代码 #

用SVG结合CSS变量实现可控制的亮度效果：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <style>
    :root {
      --brightness: 0; /* 默认0%亮度，无效果 */
    }
  </style>

  <filter id="fullRangeBrightness">
    <feComponentTransfer>
      <feFuncR type="linear" 
               slope="clamp(var(--brightness), -1, 0) + 1" 
               intercept="max(var(--brightness), 0)"/>
      <feFuncG type="linear" 
               slope="clamp(var(--brightness), -1, 0) + 1" 
               intercept="max(var(--brightness), 0)"/>
      <feFuncB type="linear" 
               slope="clamp(var(--brightness), -1, 0) + 1" 
               intercept="max(var(--brightness), 0)"/>
    </feComponentTransfer>
  </filter>

  <image href="your-image.jpg" width="100%" height="100%" filter="url(#fullRangeBrightness)"/>
</svg>

参数效果验证 #

• 当--brightness = -1（-100%亮度）：slope=0，intercept=0 → 所有像素通道值变为0，全黑。
• 当--brightness = 0（0%亮度）：slope=1，intercept=0 → 输出等于输入，无效果。
• 当--brightness = 1（100%亮度）：slope=0，intercept=1 → 所有像素通道值变为1，全白。

为什么brightness滤镜无法实现全白？ #

原生filter="brightness(k)"的核心逻辑是线性乘法：output = input * k，结果会被限制在[0,1]区间。

• 当k>1时，只有原本通道值input ≥ 1/k的像素会被拉到1；
• 对于input=0的纯黑区域像素，无论k多大，0*k=0，永远无法变为白色，这就是你遇到的“部分图像无法变为完全白色”的原因。

而自定义滤镜通过intercept参数直接给通道值加偏移量，即使是input=0的像素，在100%亮度下也能得到output=1，覆盖所有像素区域。

内容的提问来源于stack exchange，提问作者Mikasa Ackerman