I have an SVGimage element and I want that image to have a shadow using feOffset, feGaussianBlur, etc.
and at the same time, I need to set the image's brightness and contrast,
I tried the following code:
<image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg" preserveAspectRatio="defer" filter="url(#drop)"></image>
<defs>
<filter id="drop" filterUnits="userSpaceOnUse">
<feComponentTransfer in="SourceAlpha" result="doo">
<feFuncR type="discrete" tablevalues="3" />
</feComponentTransfer>
<feOffset dx="80" dy="0" result="shadow" in="doo" />
<feGaussianBlur stdDeviation="20 0" in="shadow" result="blurOut"/>
<feBlend in="SourceGraphic" in2="blurOut" />
<feComponentTransfer in="SourceGraphic">
<feFuncR type="linear" slope="0.4" />
</feComponentTransfer>
</filter>
<defs>
</svg>
but it ended up only use the last filter (second feComponentTransfer), any ideas to apply for both filter?
the first feComponentTransfer until feBlend is to create a drop shadow, and the second feComponentTransfer is to set the brightness of the image itself(not the shadow)