SVG - 使用CSS滤镜模糊某些元素

Question

我正在尝试将CSS模糊滤镜应用于一些元素，但不知何故这不起作用。

以下是一个在jsfiddle上的示例： http://jsfiddle.net/kuyraypj/

我已经应用了以下CSS，但是我的'.blurred'圆形根本没有模糊。 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元素或者有其他的方法？非常感谢。

- Spearfisher

---

使用SVG滤镜。模糊示例 - quw

你知道为什么CSS滤镜不能正常工作吗？谢谢。 - Spearfisher

Answer 1

这里是一个SVG，它具有与您CSS描述相同的滤镜效果：

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

- quw

Answer 2

看起来你正在尝试这个！

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

然而它不被某些浏览器支持。

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

- James Paul Shaulis

---

它在IE11中得到支持，之前的版本不确定。来自Microsoft的官方演示页面：http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm - quw