title: SVG - Css filter to blur some elements
body: <p>I am trying to apply the CSS filter blur to some elements but somehow this is not working.</p>
  
  <p>Here is an example in a jsfiddle:
  <a href="http://jsfiddle.net/kuyraypj/" rel="nofollow">http://jsfiddle.net/kuyraypj/</a></p>
  
  <p>I have applied the following css but my '.blurred' circle is not blurred at all.
  HTML:</p>
  
  <pre><code>&lt;svg width="500px" height="500px"&gt;
      &lt;circle class="blurred" cx="100" cy="100" r="50" fill="red"&gt;&lt;/circle&gt;    
      &lt;circle cx="220" cy="100" r="50" fill="red"&gt;&lt;/circle&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>svg circle.blurred {
    fill: green;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
  }
  </code></pre>
  
  <p>Is there a way to apply CSS3 filter to some svg elements or is there any other way?</p>
  
  <p>Many thanks</p>