SVG - Css filter to blur some elements

Question

I am trying to apply the CSS filter blur to some elements but somehow this is not working.

Here is an example in a jsfiddle: http://jsfiddle.net/kuyraypj/

I have applied the following css but my '.blurred' circle is not blurred at all. HTML:

<svg width="500px" height="500px">
    <circle class="blurred" cx="100" cy="100" r="50" fill="red"></circle>    
    <circle cx="220" cy="100" r="50" fill="red"></circle>
</svg>

CSS:

svg circle.blurred {
  fill: green;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

Is there a way to apply CSS3 filter to some svg elements or is there any other way?

Many thanks

Answer 1

Here is a SVG with the same filter effect as your CSS describes:

<svg width="500px" height="200px">
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="5" />
        </filter>
    </defs>
    <circle cx="100" cy="100" r="50" fill="green" filter="url(#blur)" ></circle>
    <circle cx="220" cy="100" r="50" fill="red"></circle>
</svg>

You can either use the filter attribute like in the above snippet or you can use CSS:

svg circle.blurred {
    filter: url(#blur);
}

<svg width="500px" height="200px">
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="5" />
        </filter>
    </defs>
    <circle class="blurred" cx="100" cy="100" r="50" fill="green"></circle>
    <circle cx="220" cy="100" r="50" fill="red"></circle>
</svg>