<svg width="5cm" height="5cm" viewBox="0 0 500 500" version="1.1">      <title>Example feBlend - Examples of feBlend modes</title>      <desc>Five text strings blended into a gradient, with one text string for each of the five feBlend modes.</desc>      <defs>           <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0">                <stop offset="0" stop-color="#000000"/>                <stop offset=".33" stop-color="#ffffff"/>                <stop offset=".67" stop-color="#ff0000"/>                <stop offset="1" stop-color="#808080"/>           </linearGradient>           <filter id="Normal">                <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>           </filter>           <filter id="Multiply">                <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>           </filter>           <filter id="Screen">                <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>           </filter>           <filter id="Darken">                <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>           </filter>           <filter id="Lighten">                <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>           </filter>      </defs>      <rect fill="none" stroke="blue" x="1" y="1" width="498" height="498"/>      <g enable-background="new">           <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)"/>           <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6">                <text x="50" y="90" filter="url(#Normal)">Normal</text>                <text x="50" y="180" filter="url(#Multiply)">Multiply</text>                <text x="50" y="270" filter="url(#Screen)">Screen</text>                <text x="50" y="360" filter="url(#Darken)">Darken</text>                <text x="50" y="450" filter="url(#Lighten)">Lighten</text>           </g>      </g> </svg>

Original SVG source