SVG 过滤器仅在添加样式属性 (Firefox) 时有效
Posted
技术标签:
【中文标题】SVG 过滤器仅在添加样式属性 (Firefox) 时有效【英文标题】：SVG filter only working when added in style attribute (Firefox) 【发布时间】：2013-12-18 06:29:28 【问题描述】：我在我的 html(text/html) 中添加了一个模糊效果 svg：
<html>
<head>...</head>
<body>
...
<svg xmlns="http://www.w3.org/2000/svg" >
<filter y="-8%" x="-8%" id="svgBlur">
<feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
</filter>
</svg>
</body>
</html>
我在我的 CSS 表中引用的内容：
#page-container
filter: url("#svgBlur");
-webkit-filter: blur(8px);
这样做会使#page-container 显示为白色（FF 无法识别 SVG 过滤器）。
时髦的部分：
当我在 Firebug 中禁用上述过滤规则并在#page-container 的样式属性中读取它时，它就像一个魅力。
<div id="page-container" style="filter: url("#svgBlur");">
我在监督什么？
响应标头：
Cache-Control no-cache, must-revalidate, post-check=0, pre-check=0
Connection Keep-Alive
Content-Encoding gzip
Content-Language nl
Content-Length 6098
Content-Type text/html; charset=utf-8
Date Mon, 02 Dec 2013 14:47:01 GMT
Etag "1385995621"
Expires Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive timeout=15, max=100
Last-Modified Mon, 02 Dec 2013 14:47:01 +0000
Link </nl/node/215271>; rel="canonical",</nl/node/215271>; rel="shortlink"
Server Apache/2.2.3 (Red Hat)
Vary Accept-Encoding
X-Powered-By php/5.3.19
Problem on Firefox 25 OSX. Webkit browsers work fine, because they use the css blur filter
【问题讨论】：
【参考方案1】：#svgBlur 是一个相对 URL。它通过在它所在的文件名前面加上so来转换为绝对URL
filter: url("#svgBlur");
在你的情况下真的只是一个简写
filter: url("stylesheet.css#svgBlur");
它没有指向任何东西。
你需要把html文件的名字放在URL里
filter: url("yourhtmlfile.html#svgBlur");
会起作用。这就是为什么它在 html 文件中当然可以工作的原因，因为在这种情况下，前置文件名指向正确的位置。
【讨论】：
查看 Josh Powell 的评论。我指的是包含在我的 HTML 中的 svg 过滤器。哪个应该可以正常工作 我的 HTML 大致如下所示： ... ... 样式定义在一个单独的 css 文件中，该文件包含在 svg 和 #page-container 在同一个文件中 要清楚，如果filter: url("#svgBlur"); 行与 svg 元素不在同一个文件中，那么您需要将 svg/HTML 文件的文件名添加到 URL 中。是这样吗？
+1 - 如果它对任何人有帮助，filter: url(".#svgBlur"); 在 Firefox 中为我工作。【参考方案2】：
我将 svg 作为 base64 字符串直接包含在 css 文件中。 这解决了我的问题。
filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)
【讨论】：
在 Firefox 中运行良好，但在 Chrome 中由于this bug 而无法运行。请注意，数据 uri 在此上下文中是外部引用。可能也存在于所有 webkit 浏览器中，因为那里也引用了 webkit 错误。 请注意，如果您使用Content-Security-Policy (CSP)，filter 中的内联 SVG 可能会失败，因为未指定预期的行为。有关详细信息，请参阅bugzilla.mozilla.org/show_bug.cgi?id=878608 - 不好的是，如果 Firefox 发生这种情况，filter 的元素将立即变为 100% 透明，而不是过滤器无效！【参考方案3】：
导致我来到这里的问题是我将 SVG 隐藏在一个 div 中，并在类中嵌入了“display: none”。
【讨论】：
【参考方案4】：在 Firefox 中似乎可以正常工作，
HTML
<svg xmlns="http://www.w3.org/2000/svg" >
<filter y="-8%" x="-8%" id="svgBlur">
<feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
</filter>
</svg>
<div id="page-container">
<img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" />
</div>
JSFIDDLE（在 div 中有图片）
JSFIDDLE（在 div 上有背景图片）
您是否在 html 标记中包含了 svg 代码？
【讨论】：
是的，我在正文结束之前将其包含在内。我将我的代码添加到另一个测试页面，它工作得非常好。但我无法弄清楚是什么影响了这种行为...... PS：我还尝试禁用所有 JS。没用 嗯，我不知道放置是否会有所作为，但它在小提琴中工作是非常奇怪的。您能否展示包含svg 的 html 在您的页面上的外观？
我也将响应标头添加到原始问题中
我查看了您的html，似乎没有任何问题。
我在其他地方尝试了完全相同的 HTML，它运行良好......但我无法弄清楚这里的外部因素【参考方案5】：
在我的例子中，由于 CSS 规则，Firefox 没有找到 SVG 过滤器：
#svg-filters
display: none;
其中svg-filters 是包含所有过滤器定义的<svg> 标记的ID。将这些行替换为
#svg-filters
position: absolute;
height: 0;
width: 0;
过滤器在 FF 中工作正常。
正如 Josh Powell 在his answer 中指出的那样，从 CSS 中引用与 HTML 文档相关的过滤器在主流浏览器中都能正常工作。
【讨论】：
【参考方案6】：我已经尝试了所有方法来解决这个问题，而不是从这个线程中进行内联过滤（在 css 中使用 base64 字符串），包括在 url() 中使用 .svg 文件的完整路径，但唯一一种方法解决了这个问题为了我。只有在元素的 style 属性中应用 css 规则，或者在 inline <style></style> 标签中定义 css 规则时，Firefox 才会看到过滤器。
【讨论】：
【参考方案7】：zelanix 上面所说的...关于添加 .在过滤器之前
.blur1
filter:url(.#blur1);
据我所知，100% 成功并适用于所有浏览器
【讨论】：
以上是关于SVG 过滤器仅在添加样式属性 (Firefox) 时有效的主要内容，如果未能解决你的问题，请参考以下文章
SVG 圆的样式在 Firefox 中不起作用，浏览器删除了半径属性
过滤器：mozilla firefox <svg> 的模糊不工作