SVG 滤镜：调整颜色通道

Question

想要调整图像中绿色通道的色调值。具体来说，将绿色值（仅）更改为真正的深绿色或黑色。使用 svg 过滤器有什么想法吗？

Answer 1

您想要 SVG feColorMatrix 和 type="matrix"。然后丢弃 Red/Blue 通道，将绿色到绿色乘以更暗。

具体来说，要将 RGBA 图像转为仅使用绿色通道并将其变暗一半（并且无论原始 alpha 是什么，都具有完整的 alpha），您需要这些矩阵值：

/*R   G   B   A   1 */
  0   0   0   0   0   // R = 0*R + 0*G   + 0*B + 0*A + 0*1
  0  0.5  0   0   0   // G = 0*R + 0.5*G + 0*B + 0*A + 0*1
  0   0   0   0   0   // B = 0*R + 0*G   + 0*B + 0*A + 0*1
  0   0   0   0   1   // A = 0*R + 0*G   + 0*B + 0*A + 1*1

示例：http://jsfiddle.net/hkah9w4d/2/

<filter id="darkGreen">
  <feColorMatrix type="matrix" values="0  0  0 0 0
                                       0 0.5 0 0 0
                                       0  0  0 0 0
                                       0  0  0 0 1" />
</filter>

您不必像那样在网格中排列值，但我更喜欢这样做，以便更清楚地说明发生了什么，并使编辑更容易。

或者，您可以使用：

<feComponentTransfer>
  <feFuncR type="linear" slope="0" />
  <feFuncG type="linear" slope="0.5" />
  <feFuncB type="linear" slope="0" />
</feComponentTransfer>

编辑：重新阅读你的问题，我想知道你是否想完整地保留红色和蓝色通道。如果是这样，您需要像下面这样的值，它复制红色到红色和蓝色到蓝色，但将绿色通道变暗到其原始亮度的 40%：

<filter id="darkenGreen">
  <feColorMatrix type="matrix" values="1  0  0 0 0
                                       0 0.4 0 0 0
                                       0  0  1 0 0
                                       0  0  0 0 1" />
</filter>

示例：http://jsfiddle.net/hkah9w4d/7/

或者，您可以使用：

<feComponentTransfer>
  <feFuncG type="linear" slope="0.4" />
  <!-- the other channels will default to type="identity" -->
</feComponentTransfer>

SVG 滤镜：调整颜色通道

SVG filters: adjust color channels

svg

svg-filters

css-filters

示例：http://jsfiddle.net/hkah9w4d/2/

示例：http://jsfiddle.net/hkah9w4d/7/