Html SVG过滤器仅在样式属性（Firefox）中添加时工作

我在我的HTML（text/HTML）中添加了模糊效果svg：

这样做会使#页面容器显示为白色（FF无法识别SVG过滤器）

---

时髦的部分：

当我在Firebug中禁用上述过滤规则并在#页面容器的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

缓存控制无缓存，必须重新验证，后检查=0，预检查=0
连接保持活动状态
内容编码gzip
内容语言
内容长度6098
内容类型text/html；字符集=utf-8
日期2013年12月2日星期一14:47:01 GMT
Etag“1385995621”
周日，1978年11月19日05:00:00 GMT
保持活动超时=15，最大值=100
最后修改日期：2013年12月2日星期一14:47:01+0000
链接rel=“规范的”，；rel=“短链接”
服务器Apache/2.2.3（红帽）
可变接受编码
X-Powered-By-PHP/5.3.19

---

---

Firefox 25 OSX上的问题。Webkit浏览器工作得很好，因为它们使用css模糊过滤器

在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>

（div中有图像）

（div上有背景图像）

您是否在html标记中包含了

svg

代码？

#svgBlur

是一个相对URL。通过在其所在文件的名称前加前缀，将其转换为绝对URL

filter: url("#svgBlur");

在你的情况下，它实际上只是

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

这并不意味着什么

您需要在URL中输入html文件的名称

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

---

会有用的。这就是为什么它在html文件中工作的原因，当然，在这种情况下，前缀文件名指向正确的位置。

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

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

---

我已经尝试了所有方法来解决这个问题，但没有从这个线程生成内联过滤器（css中使用base64字符串），包括在url（）中使用.svg文件的完整路径，但是只有一种方法为我解决了这个问题。只有在元素的style属性中应用css规则，或者在内联

标记中定义css规则时，Firefox才会看到过滤器。

zelanix上面说的。。。关于添加。在过滤器之前，如中所示

.blur1 {
filter:url(.#blur1);
}

---

从我所知道的情况来看，我的问题是我将SVG隐藏在一个div中，在类中嵌入了“display:none”。

在我的情况下，Firefox没有找到SVG过滤器，因为CSS规则：

#svg-filters {
    display: none;
}

其中

svg filters

是包含所有过滤器定义的

标记的id。将这些行替换为

#svg-filters {
    position: absolute;
    height: 0;
    width: 0;
}

过滤器在FF中工作良好

---

正如Josh Powell在中指出的那样，从CSS中引用与HTML文档相关的过滤器在主要浏览器中工作良好。

请参阅Josh Powell的评论。我指的是HTML中包含的svg过滤器。哪一个应该工作得很好我的HTML大致如下：。。。如果行

filter:url（#svgBlur）），则样式在单独的css文件中定义，该文件由svg和#页面容器包含在同一个文件中

与svg元素不在同一个文件中，那么您需要将svg/HTML文件的文件名前置到URL。是这样吗？+1-如果它对任何人都有帮助，

filter:url（“.#svgBlur”）

在firefox中为我工作。是的，我在我的身体结束前加入了它。我将代码添加到另一个测试页面，在那里它工作得非常好。但我不知道是什么影响了这种行为。。。PS：我还尝试禁用所有JS。不起作用嗯，我不知道这个位置是否会有不同，但很奇怪，它在小提琴中起作用。你能在包含

svg

的页面上显示html的外观吗？我也在原版中添加了响应标题，我查看了你的

html

，似乎没有任何问题。我在其他地方尝试了完全相同的html，效果非常好。。。但我无法找出外部因素在Firefox中运行良好，但在Chrome中不起作用，原因是。请注意，在此上下文中，数据uri是一个外部引用。可能也存在于所有webkit浏览器中，因为其中也引用了一个webkit错误。请注意，如果使用

内容安全策略（CSP），则
过滤器中的内联SVG可能会失败，因为预期的行为没有得到很好的指定。有关详细信息，请参阅–糟糕的是，如果Firefox出现这种情况，
filter
元素将立即变为100%透明，而不是filter无效！
#svg-filters {
    display: none;
}

#svg-filters {
    position: absolute;
    height: 0;
    width: 0;
}