SVG feColorMatrix Element
 Complete SVG Reference
Definition and Usage
The SVG feColorMatrix element is used to apply a matrix transformation.
The type attribute defines the type of matrix operation. The type attribute can
take one of the following values:
- matrix
- saturate
- hueRotate
- luminanceToAlpha
The value attribute's value depends on the value of the type attribute:
- For type="matrix", values is a list of 20 matrix values
- For type="saturate", values is a single real number value (0 to 1)
- For type="hueRotate", values is a single one real number value (degrees)
- For type="luminanceToAlpha", values is not applicable
Example 1
The following example shows examples of the four types of feColorMatrix
operations.
Copy the following code into Notepad and save
the file as "fecolormatrix_1.svg". Place the file in your Web directory:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGrad" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="500" y2="0">
<stop offset="0" style="stop-color:#ff00ff"/>
<stop offset=".33" style="stop-color:#88ff88"/>
<stop offset=".67" style="stop-color:#2020ff"/>
<stop offset="1" style="stop-color:#d00000"/>
</linearGradient>
<filter id="Matrix">
<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="Saturate">
<feColorMatrix type="saturate" values="0.4"/>
</filter>
<filter id="HueRotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>
<filter id="Luminance">
<feColorMatrix type="luminanceToAlpha" result="a"/>
<feComposite in="SourceGraphic" in2="a" operator="in"/>
</filter>
</defs>
<g style="font-size:50;fill:url(#MyGrad)">
<text x="50" y="60">Unfiltered</text>
<text x="50" y="120" style="filter:url(#Matrix)">Matrix
</text>
<text x="50" y="180" style="filter:url(#Saturate)">Saturate
</text>
<text x="50" y="240" style="filter:url(#HueRotate)">HueRotate
</text>
<text x="50" y="300" style="filter:url(#Luminance)">Luminance
</text>
</g>
</svg>
|
View example
Complete SVG Reference
| 
