<feColorMatrix>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The<feColorMatrix>SVG filter element changes colors based on a transformation matrix. Every pixel's color value[R,G,B,A] ismatrix multiplied by a 5 by 5 color matrix to create new color[R',G',B',A'].
Note:The prime symbol' is used in mathematics indicate the result of a transformation.
| R' | | r1 r2 r3 r4 r5 | | R || G' | | g1 g2 g3 g4 g5 | | G || B' | = | b1 b2 b3 b4 b5 | * | B || A' | | a1 a2 a3 a4 a5 | | A || 1 | | 0 0 0 0 1 | | 1 |
In simplified terms, below is how each color channel in the new pixel is calculated. The last row is ignored because its values are constant.
R' = r1*R + r2*G + r3*B + r4*A + r5G' = g1*R + g2*G + g3*B + g4*A + g5B' = b1*R + b2*G + b3*B + b4*A + b5A' = a1*R + a2*G + a3*B + a4*A + a5
Take the amount of red in the new pixel, orR':
It is the sum of:
r1times the old pixel's redR,r2times the old pixel's greenG,r3times of the old pixel's blueB,r4times the old pixel's alphaA,- plus a shift
r5.
These specified amounts can be any real number, though the finalR' will be clamped between 0 and 1. The same goes forG',B', andA'.
R' = r1 * R + r2 * G + r3 * B + r4 * A + r5New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]
If, say, we want to make a completely black image redder, we can make ther5 a positive real numberx, boosting the redness on every pixel of the new image byx.
Anidentity matrix looks like this:
R G B A WR' | 1 0 0 0 0 |G' | 0 1 0 0 0 |B' | 0 0 1 0 0 |A' | 0 0 0 1 0 |
In it, every new value is exactly 1 times its old value, with nothing else added. It is recommended to start manipulating the matrix from here.
Like other filter primitives, it handles color components in thelinearRGBcolor space by default. You can usecolor-interpolation-filters to usesRGB instead.
Usage context
Attributes
DOM Interface
This element implements theSVGFEColorMatrixElement interface.
Example
SVG
<svg width="100%" height="100%" viewBox="0 0 150 500" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">Reference</text> <!-- identity matrix --> <filter> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colorMeTheSame)" /> <text x="70" y="120">Identity matrix</text> <!-- Combine RGB into green matrix --> <filter> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colorMeGreen)" /> <text x="70" y="190">rgbToGreen</text> <!-- saturate --> <filter> <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colorMeSaturate)" /> <text x="70" y="260">saturate</text> <!-- hueRotate --> <filter> <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colorMeHueRotate)" /> <text x="70" y="330">hueRotate</text> <!-- luminanceToAlpha --> <filter> <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" /> </filter> <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" /> <text x="70" y="400">luminanceToAlpha</text></svg>Result
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # feColorMatrixElement |