SVG: color of the shadow

Question

I want to write a simple rectangle with a red shadow in SVG. I have a simple filter:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
  <title>svg arrow with dropshadow</title>
  <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc>
  <defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
     <feComponentTransfer in="SourceAlpha">
         <feFuncR type="discrete" tableValues="1"/>
         <feFuncG type="discrete" tableValues="0"/>
         <feFuncB type="discrete" tableValues="0"/>
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="2"/>
     <feOffset dx="0" dy="0" result="shadow"/>
     <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
   </filter>
  </defs>
  <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)">
</svg>

Why in this example shadow color is not red? Where is my bad?

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/?page=2 You can overlay the primitive filter image with real image, to acheive it. i used it in that way. — Kris, Nov 01 '11 at 10:58

score 26 · Answer 1 · answered Sep 12 '14 at 23:25

26

For those looking for a general solution, this worked for me inside a element:

<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"/>
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/>
<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>

answered Sep 12 '14 at 23:25

Joe W

261
3
2

i get pretty result with this feFlood and fecomposite – crapthings Feb 26 '16 at 06:37

score 9 · Accepted Answer · edited Jun 20 '20 at 09:12

9

You have provided invalid SVG - you need to close your <rect> element.
Your example (fixed) shows a red shadow for me in Chrome. Here's what this URL looks like for me with Chrome v15:

What OS/browser/version are you seeing different results with?

Edit: In Firefox v7 I see all greyscale, and in Safari v5 I don't see the shadow effect at all. Your answer, most likely then, is simply that you're testing in a browser/version with incomplete support of the SVG filter specification.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 01 '11 at 21:30

Phrogz

296,393
112
651
745

1

Safari didn't support filters until version 6, see http://caniuse.com/#feat=svg-filters. – Erik Dahlström Mar 14 '13 at 21:11
2

I'm assuming it doesn't produce red due to http://www.w3.org/TR/SVG11/filters.html#SourceAlpha. SourceAlpha -> implicit black color (#000) + alpha. It does work in Opera and Chrome if you replace `in="SourceAlpha"` with `in="SourceGraphic"`. – Erik Dahlström Mar 14 '13 at 21:32
The problem with Firefox is that it used to have a bug where it wouldn't process a discrete feFunc with a single value. It could be worked around by using two values eg. tableValues="1 1". This was fixed about 18 months ago. – Michael Mullany Jun 26 '14 at 00:04

SVG: color of the shadow

2 Answers2

Linked