SVG feComponentTransfer Filter

by Online Tutorials Library July 14, 2022

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

SVG feComponentTransfer Filter

The <feComponentTransfer> Filter

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like