css - 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 元素，或者还有其他方法吗？

非常感谢

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>