SVG过滤器只有在样式属性（Firefox）中添加时才工作 [英] SVG filter only working when added in style attribute (Firefox)
问题描述
我为HTML（text / html）添加了一个模糊效果svg：
< html&
< head> ...< / head>
< body>
...
< svg xmlns =http://www.w3.org/2000/svgheight =0>
< filter height =116％width =116％y = - 8％x = - 8％id =svgBlur>
< feGaussianBlur stdDeviation =8in =SourceGraphic/>
< / filter>
< / svg>
< / body>
< / html>
我在我的CSS表格中引用了：
＃page-container {
filter：url（＃svgBlur）;
-webkit-filter：blur（8px）;
}
这样做会使＃page-container显示为白色
有趣的部分： / p>
当我在Firebug中禁用上述过滤规则，并在＃page-container的style属性中读取它时，它的作用就像一个charm。
< div id =page-containerstyle =filter：url（＃svgBlur）;>
我监督什么？
响应头：
高速缓存控制无高速缓存，检查= 0，预检查= 0
连接保持活动
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
Etag1385995621
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
服务器Apache / 2.2.3（Red Hat）
Vary接受编码
X-Powered-By PHP / 5.3.19
Firefox 25 OSX的问题。 Webkit浏览器工作正常，因为他们使用css模糊过滤器
base64字符串直接插入css文件。
这解决了我的问题。
filter：url（data：image / svg + xml; base64，PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI + PGZpbHRlciBpZD0ic3ZnQmx1ciI + PGZ1R2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4 =＃svgBlur）
I added a blur effect svg to my HTML(text/html):
<html>
<head>...</head>
<body>
...
<svg xmlns="http://www.w3.org/2000/svg" height="0">
<filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
<feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
</filter>
</svg>
</body>
</html>
Which I reference to in my CSS sheet:
#page-container {
filter: url("#svgBlur");
-webkit-filter: blur(8px);
}
Doing this makes the #page-container appear white (FF doesn't recognize the SVG filter).
The funky part:
When I disable the above filter rule in Firebug and readd it in the style attribute of the #page-container, it works like a charm.
<div id="page-container" style="filter: url("#svgBlur");">
What am I overseeing?
Response headers:
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
I included the svg as a base64 string directly into the css file. This solved my problem.
filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)
这篇关于SVG过滤器只有在样式属性（Firefox）中添加时才工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
