Question

我正在尝试找到Firefox的替代品：filter: blur(3px);，这只会在Firefox 34上得到支持。研究已经向我指出了SVG过滤器。

我可以使用这一行CSS对SVG应用灰度效果：

filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><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"/></svg>"); /* Firefox 10+, Firefox on Android */

不幸的是，当我尝试类似的模糊，更改过滤器功能，但坚持使用相同的语法时，没有任何反应。

   filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><feGaussianBlur stdDeviation="10"/></svg>")

你可以帮我解决一下吗？

我已经看过几个修改html文件的例子。但是，考虑到Firefox 34将在几个月后上市，我觉得这是不可取的（所以我宁愿保持干净简洁）。

Answer 1

您需要使用id / anchor将datauri指向过滤器本身。

filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='blur10'><feGaussianBlur  stdDeviation='10' /></filter></svg>#blur10");

这是一篇解释这个问题的文章（比我的英语能力差得多）：http://benfrain.com/applying-multiple-svg-filter-effects-defined-in-css-or-html/

Firefox的模糊效果滤镜

1 个答案: