SVG feComponentTransfer Element
 Complete SVG Reference
Definition and Usage
The SVG feColorMatrix element is used to perform component-wise remapping of
data. It allows brightness adjustment, contrast adjustment, color balance or
thresholding.
The specification of the transfer functions is defined by the sub-elements to 'feComponentTransfer':
- feFuncR, transfer function for red component of the input graphic
- feFuncG, transfer function for green component of the input graphic
- feFuncB, transfer function for blue component of the input graphic
- feFuncA, transfer function for alpha component of the input graphic
The type attribute defines the type of component transfer function. The type
attribute can take one of the following values:
- identity
- table
- discrete
- linear
- gamma
Example 1
The following example shows examples of four types of feComponentTransfer
operations.
Copy the following code into Notepad and save
the file as "fecomponenttransfer_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="50" y1="0" x2="600" y2="0">
<stop offset="0" stop-color="#ff0000" />
<stop offset=".33" stop-color="#00ff00" />
<stop offset=".67" stop-color="#0000ff" />
<stop offset="1" stop-color="#000000" />
</linearGradient>
<filter id="Identity">
<feComponentTransfer>
<feFuncR type="identity"/>
<feFuncG type="identity"/>
<feFuncB type="identity"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
<filter id="Table">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"/>
<feFuncG type="table" tableValues="1 1 0 0"/>
<feFuncB type="table" tableValues="0 1 1 0"/>
</feComponentTransfer>
</filter>
<filter id="Linear">
<feComponentTransfer>
<feFuncR type="linear" slope=".5" intercept=".25"/>
<feFuncG type="linear" slope=".5" intercept="0"/>
<feFuncB type="linear" slope=".5" intercept=".5"/>
</feComponentTransfer>
</filter>
<filter id="Gamma">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
<feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
<feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
</feComponentTransfer>
</filter>
</defs>
<g font-size="50" font-weight="bold" fill="url(#MyGrad)">
<text x="50" y="60" filter="url(#Identity)">Identity</text>
<text x="50" y="120" filter="url(#Table)">TableLookup</text>
<text x="50" y="180" filter="url(#Linear)">LinearFunc</text>
<text x="50" y="240" filter="url(#Gamma)">GammaFunc</text>
</g>
</svg>
|
View example
Complete SVG Reference
 |
|
Get Your Diploma!
W3Schools' Online Certification Program is the perfect solution for busy
professionals who need to balance work, family, and career building.
The HTML Certificate is for developers who want to document their knowledge of HTML, XHTML, and CSS.
The ASP Certificate is for developers who want to document their knowledge of ASP, SQL, and ADO.
|
|
HOME
Printer friendly page
