Question

我在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);
}

这样做会使＃page-container显示为白色（FF无法识别SVG过滤器）。

时髦的部分：

当我在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.19

Problem on Firefox 25 OSX. Webkit browsers work fine, because they use the css blur filter

Answer 1

#svgBlur是相对网址。它通过在其前面添加文件的名称来转换为绝对URL

filter: url("#svgBlur");

在你的情况下，

实际上只是

的简写

filter: url("stylesheet.css#svgBlur");

哪个指向任何东西。

您需要将html文件的名称放在URL

中

filter: url("yourhtmlfile.html#svgBlur");

会奏效。这就是为什么它在html文件中工作的原因当然前缀文件名指向正确的位置。

Answer 2

我将svg作为base64字符串直接包含在css文件中。这解决了我的问题。

filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)

Answer 3

My problem that led me here was I had hidden the SVG inside of a div with "display: none" embedded in the class.

Answer 4

似乎在Firefox中运行良好，

<强> HTML

<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>
<div id="page-container">
   <img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" alt="forest" />
</div>

JSFIDDLE（div中有图片）

JSFIDDLE（在div上有背景图片）

您是否在html标记中包含了svg代码？

Answer 5

我已经尝试了所有解决这个问题的方法，而没有在这个线程中使用内联过滤器（在css中使用base64字符串），包括在url（）中使用.svg文件的完整路径，但是唯一一个方法解决了这个问题为了我。只有在元素的style属性中应用css规则，或者在内联<style></style>标记中定义css规则时，Firefox才会看到过滤器。

Answer 6

在我的情况下，由于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文档的筛选器在主要浏览器中都能正常工作。

Answer 7

上面说的zelanix ...关于添加a。在过滤器之前，如

#(65 66 67 65 769)

这个技巧是100％并且可以在我所知道的所有浏览器中使用

SVG过滤器仅在样式属性（Firefox）中添加时才起作用

7 个答案: