SVG过滤器仅在样式属性中添加时才起作用(Firefox)
SVG过滤器仅在样式属性中添加时才起作用(Firefox)
提问于 2013-12-02 22:03:09
我在html(text/html)中添加了一个模糊效果svg：
<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>我在CSS工作表中引用了它：
#page-container {
filter: url("#svgBlur");
-webkit-filter: blur(8px);
}这样做会使#页面容器显示为白色容器(FF无法识别过滤器)。
时髦的部分：
当我在Firebug中禁用上面的过滤规则，并在#page-container的style属性中读取它时，它就像一个护身符。
<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.19Problem on Firefox 25 OSX. Webkit browsers work fine, because they use the css blur filter
回答 7
Stack Overflow用户
回答已采纳
发布于 2013-12-03 02:57:03
我将svg作为base64字符串直接包含到css文件中。这解决了我的问题。
filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)Stack Overflow用户
发布于 2013-12-02 22:24:01
#svgBlur是一个相对URL。通过在其所在文件的名称前加上绝对URL，将其转换为绝对URL
filter: url("#svgBlur");在你的案例中只是一种速记
filter: url("stylesheet.css#svgBlur");这并不能说明任何问题。
您需要在URL中输入html文件的名称
filter: url("yourhtmlfile.html#svgBlur");都会起作用的。这就是为什么当它在html文件中时，它会起作用，因为在这种情况下，预先添加的文件名指向正确的位置。
Stack Overflow用户
发布于 2017-06-13 01:04:55
导致我来到这里的问题是，我将SVG隐藏在类中嵌入了"display: none“的div中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20330149
复制相关文章
相似问题