颜色通道转换滤镜

前端教程SVG

<feComponentTransfer> 颜色通道转换滤镜修改每个输入源图形的像素的R/G/B/A通道颜色。使用此滤镜可以实现行亮度调整，对比度调整，色彩平衡或阈值调整等。

计算公式：

R' = feFuncR( R )
G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )

• R G B A：原始像素4个颜色通道的值；
• R' G' B' A'：修改后的值
• feFuncR feFuncG feFuncB feFuncA：4个通道的转换公式函数

基本语法

<filter id="identity" x="0" y="0" width="100%" height="100%">
  <feComponentTransfer>
    <feFuncR type="identity"></feFuncR>
    <feFuncG type="identity"></feFuncG>
    <feFuncB type="identity"></feFuncB>
    <feFuncA type="identity"></feFuncA>
  </feComponentTransfer>
</filter>
<filter id="table" x="0" y="0" width="100%" height="100%">
  <feComponentTransfer>
    <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
    <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
    <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
  </feComponentTransfer>
</filter>
<filter id="discrete" x="0" y="0" width="100%" height="100%">
  <feComponentTransfer>
    <feFuncR type="discrete" tableValues="0 0 1 1"></feFuncR>
    <feFuncG type="discrete" tableValues="1 1 0 0"></feFuncG>
    <feFuncB type="discrete" tableValues="0 1 1 0"></feFuncB>
  </feComponentTransfer>
</filter>
<filter id="linear" x="0" y="0" width="100%" height="100%">
  <feComponentTransfer>
    <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
    <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
    <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
  </feComponentTransfer>
</filter>
<filter id="gamma" x="0" y="0" width="100%" height="100%">
  <feComponentTransfer>
    <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
    <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
    <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
  </feComponentTransfer>
</filter>

• feFuncR``feFuncG``feFuncB``feFuncA：4个颜色通道对应的公式函数
• type="identity | table | discrete | linear | gamma"：函数类型
  • identity：输出值和原始值保持一致，即不进行修改
  • table：将原始值连续地映射到 tableValues 的值
  • descrete：将原始值离散地映射到 tableValues 的值
  • linear：线性公式 RESULT = intercept + slope*INPUT
  • gamma：gamma 公式 RESULT = offset + amplitude*(INPUT^exponent)
  • 更加详细的说明，请参考：webplatform - feComponentTransfer

示例

新窗口打开