2

I'm using this answer to apply a drop shadow on a SVG element like a circle. I have a fill attribute on my element to apply a background color on it, and now I'd like to combine all that with a background image on the circle.

I've tried using a <pattern>but I can only have the background-image, or adding <feImage> to my filter drop shadow but the filter doesn't work anymore.

Basically, what should I add to this code knowing my image can be found in /public/images/... :

<filter id="dropshadow" width="130%" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  <feOffset dx="0" dy="4" result="offsetblur"/>
    <feComponentTransfer>
    <feFuncA type="linear" slope="0.1"/>
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<circle cx="50%" cy="50%" r="49%" filter="url(#dropshadow)" fill="#f8f8f8" stroke="#e7e7e7" stroke-width="1px"/>
Community
  • 1
  • 1
Guillaume
  • 2,912
  • 3
  • 35
  • 59

1 Answers1

0

Well I don't know how hard you tried on the feImage,. but this code works perfectly. You want to pull in the feImage, then clip it to the source with a feComposite "in". Then you can composite the dropshadow under that result.

<svg>
<defs>

<filter id="dropshadow" width="130%" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feComponentTransfer in="offsetblur" result="dropshadow">
<feFuncA type="linear" slope="0.1"/>
</feComponentTransfer>

<feImage result="bgpic" xlink:href="http://www.sencha.com/img/sencha-large.png" /> 
<feComposite operator="atop" in="bgpic" in2="SourceGraphic" result="coikelwimg"/>

<feMerge> 
<feMergeNode in="coikelwimg"/>
<feMergeNode in="dropshadow"/>
</feMerge>
</filter>

</defs>
<circle cx="50%" cy="50%" r="49%" filter="url(#dropshadow)" fill="#f8f8f8" stroke="#e7e7e7" stroke-width="1px"/>

</svg>
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Sorry about the delay, I just tried your code. I was using a filter for the shadow, and then a pattern for the image and background-color. Then we tried splitting the svg in two, i.e. having the `...` in one svg and the ``in another one, and it wasn't working anymore – Guillaume Apr 08 '13 at 07:18
  • Anyway, your code seems to work, except that when I replace the xlink:href by a local url like `/public/images/...` it does not show the image, not sure why yet. However, I noted that if you put a `rgba()`color in the `fill=`attribute with an alpha like 0.5, the alpha is applied to the background image as well, is there another way so that it won't? thanks for your help – Guillaume Apr 08 '13 at 07:21
  • dump the rgba and do all your opacity changes within the filter: http://jsfiddle.net/ncfcu/5/ – Michael Mullany May 03 '13 at 20:01
  • what I meant was that I wonder if there is a way to have the alpha channel only applied to the `background-color`, not the whole shape. Wether I put it in the rgba or like you did, it is still applied to the `background-image` – Guillaume May 06 '13 at 07:45
  • Ok...one more try. I think this is what you want? Doing everything you asked for within the filter: jsfiddle.net/ncfcu/7 – Michael Mullany May 07 '13 at 06:41
  • It's very close now! So I get how composites work and the feFlood that fills in with a color in the SourceCraphic, but that will remove any border that you add on the shapes: http://jsfiddle.net/ncfcu/8/. Sorry to bother you one more time, but I tried a bunch of things with offsets on the feFlood or putting a transparent background in the fill attribute and then playing around with feComposite but it doesn't add up – Guillaume May 07 '13 at 08:37
  • well you can mock up a border inside a filter, but it's a little complicated. Why can't you just draw another shape with no-fill on top of the first shape? – Michael Mullany May 07 '13 at 15:22
  • that's a good point! I'll see if it goes well with the drop shadow – Guillaume May 13 '13 at 08:42