feComponentTransfer element | SVGFEComponentTransferElement object

Performs component-wise remapping of data allowing operations like brightness adjustment, contrast adjustment, color balance, or thresholding.

Scalable Vector Graphics: Filter Effects, Section 15.25.5Internet Explorer 10

 

Syntax

Copy 

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

DOM Information

Inheritance Hierarchy

 Node
  Element
   SVGElement
     SVGFEComponentTransferElement

Members

The SVGFEComponentTransferElement object has these types of members:

Properties

The SVGFEComponentTransferElement object has these properties.

PropertyAccess typeDescription

height

Gets or sets the height of an element.

in1

Read-only

Identifies input for the given filter primitive.

result

Read-only

Provides a reference for the output result of a filter.

width

Defines the width of an element.

x

Gets or sets the x-coordinate value.

y

Gets or sets the y-coordinate value.

 

Standards information

Remarks

This filter primitive performs component-wise remapping of data as follows for every pixel:

HTML
Copy 

R' = feFuncR( R )
G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )

It allows operations like brightness adjustment, contrast adjustment, color balance, or thresholding.

The feFuncR, feFuncG, feFuncB, andfeFuncA elements can be children of the feComponentTransfer element. For more information, see SVGFEFuncRElement.

The calculations are performed on non-premultiplied color values. If the input graphics consist of premultiplied color values, those values are automatically converted into non-premultiplied color values for this operation. (Note that the undoing and redoing of the premultiplication can be avoided if feFuncA is the identity transform and all alpha values on the source graphic are set to 1.)

Examples

The following W3C example shows the four types of feComponentTransfer operations.

HTML
Copy 

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>Example feComponentTransfer - Examples of feComponentTransfer operations</title>
  <desc>Four text strings showing the effects of feComponentTransfer: 
        an identity function acting as a reference, 
        use of the feComponentTransfer table option,
        use of the feComponentTransfer linear option,
        and use of the feComponentTransfer gamma option.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" 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" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"/>
        <feFuncG type="identity"/>
        <feFuncB type="identity"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
    </filter>
    <filter id="Table" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <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" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <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" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <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>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="798" height="398"/>
  <g font-family="Verdana" font-size="75" 
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="600" height="20" />
    <text x="100" y="90">Identity</text>
    <text x="100" y="190" filter="url(#Table)" >TableLookup</text>
    <text x="100" y="290" filter="url(#Linear)" >LinearFunc</text>
    <text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text>
  </g>
</svg>

See also

Node
SVGFEFuncRElement

 

 

Show: