在元素上应用 SVG css 过滤器会导致其可见性答案

【问题标题】：Applaying SVG css filter on element causes its unvisibility在元素上应用 SVG css 过滤器会导致其可见性
【发布时间】：2014-09-15 14:01:49
【问题描述】：

我正在尝试使用 css 模糊效果。我想让它跨浏览器（Chrome 和 Firefox）。在 chrome 上，我可以简单地使用-webkit-filter: blur(4px);，但在 Firefox 上，我必须使用 SVG 效果。所以，在我的 CSS 中，我添加了：

.blurred {
    filter: url(#blur);
}

我的 HTML 标记 (HTML5)：

<body>
<div id="wrapper" class="blurred">Lorem ipsum</div>
<svg height="0">
<filter id="blur">
  <feGaussianBlur stdDeviation="3" />
</filter>
</svg>
</body>

不幸的是，在任何元素上应用 .blurred 类，使其空白（或白色，因为我仍然可以点击链接等）。有什么解决办法吗？

编辑：我已经检查过了，只有从样式表文件加载样式时才会出现问题。当它在 html 文件中的样式标记时 - blur 正常工作:(

【问题讨论】：

我在某个地方找到了它作为修复。
这有效perfectly fine for me，我无法重现错误
@ZachSaucier 请查看我的编辑 - 我再次检查过，当样式和标记在同一个文件中时，它也适用于我。从外部文件加载css代码时，它不起作用
我们无法根据这些信息进行调试。
只需创建 index.html 文件，将 html 代码和 SVG 放在那里。链接到外部 style.css 文件 - 将 filter: url(#blur); 放在那里。

标签： html css firefox svg-filters

【解决方案1】：

url(#xxx) 是 url(#the file I'm in#xxx) 的简写，所以当你把它放在你的 .css 文件中时，它变成了 url(file.css#xxx) 并且没有 xxx 在css 文件，它在 html 文件中。

答案是添加 html 文件名。即

.blurred {
    filter: url(file.html#blur);
}

【讨论】：