SVG过滤器：调整颜色通道

Question

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

Answer 1

您希望SVG feColorMatrix与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>

你不必在这样的网格中排列这些值，但我更喜欢这样做，以便更清楚地说明发生了什么，并使编辑更容易。< / p>

或者，您可以使用：

<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>