SVG feBlend Filter

by Online Tutorials Library July 14, 2022

The <feBlend> Filter

The <feBlend>filter is used to combine the two layers of an image using the methods: multiply, darken, screen, or lighten.

It takes two inputs, “in” and “in2” and “mode” that specify how the inputs are to be blended.

Example

  <!DOCTYPE html>  <html>  <body>  <svg height=”900″ width=”900″>    <filter id=”multiply” x=”0″ y=”0″ height=”100%” width=”100%”>  <feBlend mode=”screen” in2=”BackgroundImage” in=”SourceGraphic”/>  </filter>    <g enable-background=”new”>  <rect x=”10″ y=”10%” height=”4%” width=”50%” fill=”purple” fill-opacity=”.6″/>  <rect x=”10″ y=”14%” height=”4%” width=”50%” fill=”blue” fill-opacity=”.6″/>  <rect x=”10″ y=”18%” height=”4%” width=”50%” fill=”green” fill-opacity=”.4″ filter=”url(#multiply)” />    </g>  </svg>  </body>  </html>  

Test it Now

Next TopicSVG Translate Transformation

SVG feBlend Filter

The <feBlend> Filter

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like