SVG filters: adjust color channels

问题

Looking to adjust the tonal values of the green color channel in an image. Specifically, changing the green values (only) to really dark green or black. Any ideas using svg filters?

回答1:

You want the SVG feColorMatrix with type="matrix". Then discard the Red/Blue channels, and multiply the green-to-green to be darker.

Specifically, to turn an RGBA image to use just the green channel and darken it by half (and have full alpha no matter what the original alpha was), you want these matrix values:

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

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

You don't have to line up the values in a grid like that, but I prefer to do so in order to make it more clear what's going on, and make it easier to edit.

Alternatively, you could use:

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

Edit: re-reading your question, I wonder if perhaps you wanted to leave the red and blue channels intact. If so, you want values like the following, which copy red-to-red and blue-to-blue, but darken the green channel to 40% of its original brightness:

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

Example: http://jsfiddle.net/hkah9w4d/7/

Alternatively, you could use:

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

来源：https://stackoverflow.com/questions/28097128/svg-filters-adjust-color-channels

标签

svg

svg-filters

css-filters