The feColorMatrix element for SVG specifies a matrix transformation on the RGBA color and alpha values of every pixel on the input graphics to produce a result with a new set of RGBA color and alpha values.
Specifies the input for the filter primitive.
If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference> SourceGraphic (or result) Specifies the type of matrix operation.
matrix | saturate | hueRotate | luminanceToAlpha Specifies a number or list of numbers depending on the type attribute.
For hueRotate , a single real number value (degrees).
For matrix , a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma.
For saturate , a single real number value.
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="BackgroundImage" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="FillPaint" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix result="myresult" values="0 1 1 0 0 1 0 1 0 0 1 1 0 0 0 0 0 0 1 0"/>
<feColorMatrix in="myresult" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="SourceAlpha" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="SourceGraphic" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="myid">
<feColorMatrix in="StrokePaint" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="#ff000080" filter="url(#myid)" r="50vh" stroke="#0000ff80" stroke-width="50"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="0.25" stop-color="red"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.75" stop-color="blue"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<filter id="myid2">
<feColorMatrix type="hueRotate" values="180"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="0.25" stop-color="red"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.75" stop-color="blue"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<filter id="myid2">
<feColorMatrix type="luminanceToAlpha"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="0.25" stop-color="red"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.75" stop-color="blue"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<filter id="myid2">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="0.25" stop-color="red"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.75" stop-color="blue"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<filter id="myid2">
<feColorMatrix type="saturate" values="0.5"/>
</filter>
</defs>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myid1">
<stop/>
<stop offset="0.25" stop-color="red"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="0.75" stop-color="blue"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<filter id="myid2">
<feColorMatrix type="hueRotate" values="0"/>
</filter>
<filter id="myid3">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
<filter id="myid4">
<feColorMatrix type="saturate" values="1"/>
</filter>
</defs>
<circle cy="50%" fill="url(#myid1)" filter="url(#myid2)" r="50vh"/>
<circle cx="50%" cy="50%" fill="url(#myid1)" filter="url(#myid3)" r="50vh"/>
<circle cx="100%" cy="50%" fill="url(#myid1)" filter="url(#myid4)" r="50vh"/>
</svg>