CODEWITHSUNDEEP
imagehtmlsvgsvg-filters
Eldon Lesley
Eldon Lesley

Reputation: 925

Have an SVG element using 2 filter

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)

Upvotes: 2

Views: 381

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31715

It's always best to explicitly add "result" and "in"'s to your filters so you can keep track of what's feeding what. This is what has tripped you up here. As it stands, you have two filter chains that end with blurOut and an unnamed final result. You need to redo the order of your operations to adjust the sourcegraphic separately, then composite it on top of the shadow. Code below. And also...

A few cleanups:

  1. there's no need to set filter units if you're not going to set dimensions on the filter.
  2. feComponentTransfer ceilings values over 1 and floors values below 0, so that 3 - can be a 1.
  3. It is a bug in mozilla that won't give you a proper color conversion when there's only one value in the array - you should repeat the value twice and that will now work in firefox.

Working code is:

<filter id="drop">
  <feComponentTransfer in="SourceAlpha" result="doo">
    <feFuncR type="discrete" tableValues="1 1" />
  </feComponentTransfer>

  <feOffset dx="80" dy="0"  in="doo" result="shadow"/>
  <feGaussianBlur stdDeviation="20 0" in="shadow" result="blurOut"/>

  <feComponentTransfer in="SourceGraphic" result="unbrightsource">
    <feFuncR type="linear" slope="0.4" />
  </feComponentTransfer>

  <feBlend mode="normal" in="unbrightsource" in2="blurOut" result="final"/>


</filter>

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124049

Presumably the in of the feComponentTransfer should be blurOut rather than the SourceGraphic which is the original input.

Upvotes: 1

Related Questions