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

← prev next →