Css滤镜模糊一些元素

Question

我尝试对某些元素应用CSS滤镜模糊，但不知何故这不起作用。

下面是一个jsfiddle中的例子:http://jsfiddle.net/kuyraypj/

我已经应用了以下css，但我的'。模糊的圆圈一点也不模糊。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);
}

是否有办法将CSS3过滤器应用于一些svg元素或有其他方法?

多谢

Answer 1

下面是一个与CSS描述的滤镜效果相同的SVG:

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

您可以像上面的代码片段一样使用filter属性，也可以使用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>

Answer 2

看来你是在尝试这个!

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

但是某些浏览器不支持。

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