SVG: color of the shadow

Question

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

Answer 1

1. You have provided invalid SVG - you need to close your <rect> element.

2. 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.

Answer 2

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"/>