CODEWITHSUNDEEP
csssvg
Spearfisher
Spearfisher

Reputation: 8773

SVG - Css filter to blur some elements

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

Upvotes: 4

Views: 16191

Answers (2)

quw
quw

Reputation: 2854

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>

Upvotes: 12

James Paul Shaulis
James Paul Shaulis

Reputation: 111

It would seem that you are trying this!

http://www.w3schools.com/svg/svg_fegaussianblur.asp

However it is not supported by certain browsers.

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_fegaussianblur

Upvotes: -2

Related Questions