SVG 过滤器：调整颜色通道

Question

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

Answer 1

您希望SVGfeColorMatrix用type="matrix"。然后丢弃红色/蓝色通道，并将绿色乘以绿色以变暗。

具体来说，要将 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>