0

这是 CSS 模糊过滤器的工作代码：

filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url('images/blur.svg#blur');

blur.sv 在哪里：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>

这适用于灰度：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

但是我如何使它们同时进行灰度和模糊（尤其是使用 URL）？我试过：

filter: blur(3px) grayscale(100%);
-webkit-filter: blur(3px) grayscale(100%);
-moz-filter: blur(3px) grayscale(100%);
-o-filter: blur(3px) grayscale(100%);
-ms-filter: blur(3px) grayscale(100%);
filter: url('images/blur.svg#blur'), url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

但它只给了我没有模糊的灰度。任何帮助，将不胜感激。

编辑：我想让它在最新的主要浏览器中运行，正如 Rakesh Juyal 所说，它在 Chrome 中运行良好，但在 Firefox 中运行良好。

4

1 回答 1

2

请在此处查看工作示例：

http://jsbin.com/okemik/6

我用模糊+灰度滤镜制作了一个svg元素：

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>

  <filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter>

  <filter id='grayscaledBlur'>
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>

    <feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>

    </filter>


</svg>
于 2012-12-18T11:37:10.400 回答