Firefox 的模糊效果过滤器答案

【问题标题】：Blur effect filter for FirefoxFirefox 的模糊效果过滤器
【发布时间】：2014-09-05 22:40:20
【问题描述】：

我正在尝试寻找一个 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 将在几个月后推出（因此我宁愿保持简洁），这对我来说并不理想。

【问题讨论】：

我不相信您的灰度过滤器可以正常工作，因为您输入了语法错误。
确实如此！刚刚测试过删除那一行，Firefox 中的灰度已关闭。我把它放回去，它又可以工作了。
您使用双引号来分隔 URL 和标记内，并且您没有指定或使用过滤器 ID。我试过了，它对我不起作用。我假设您的实际过滤器有些不同。

标签： html css firefox svg svg-filters

【解决方案1】：

您需要使用 id / 锚点将 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/

【讨论】：

谢谢！这样就成功了，这篇文章很好地详细说明了它。很抱歉花了一个月时间来批准这个答案。