The <feComponentTransfer> Filter

The <feComponentTransfer> is used to allow the independent redefinition of all four color channels R, G, B and A. It also allows the adjustment of brightness of all the channels of an image.

Example

<!DOCTYPE html>
<html>
<body>
<svg height="900" width="900">

<filter id="H">
<feGaussianBlur stdDeviation="1" />
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 .5 1 0"/>
<feFuncG type="discrete" tableValues="0 .5 0"/>
<feFuncB type="discrete" tableValues="1"/>
</feComponentTransfer>
</filter>

<rect x="30" y="10" height="100" width="100" filter="url(#H)"/>
</svg>
</body>
</html>

Test it Now

Next TopicSVG feComposite Filter

← prev next →