SVG过滤器在Firefox中不显示，在Chrome中工作正常
我想要一块黑色的文本在黑色的背景上有一个白色的辉光在它外面。尽管CSS (如filter: drop-shadow(2px 2px 2px black))中的default drop shadow filter应该正式支持'spread-radius‘第四个属性，但对该属性的支持基本上是不存在的。如果没有这个额外的展开，投影阴影将不足以让文本被阅读。
因此，我决定在SVG标记中定义自己的过滤器，包括一个扩展操作来实现额外的跨页，并将其应用于文本。这个过滤器在Chrome中运行良好，但会导致文本在Firefox中完全看不见(两者都是在Ubuntu 14.04下测试的)。根据caniuse.com的说法(我发现，通常非常可靠)，火狐应该可以很好地支持过滤器。
带有SVG过滤器的HTML代码：
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="my-drop-shadow" x="0" y="0" width="200%" height="200%">
<feColorMatrix type="matrix" values=
"0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
0 0 0 1 0"/>
<feMorphology operator="dilate" radius="2" />
<feGaussianBlur stdDeviation="2" in="coloredOut" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
<p>Hello there.</p>CSS：
body {
color: #000; background: #002;
font-family: serif; font-size: 30px;
font-weight: bold;
}
p {
-webkit-filter: url(#my-drop-shadow);
filter: url(#my-drop-shadow);
}Chrome (版本46.0.2490.80 (64位))上的结果：
Firefox (版本42.0)上的结果：
我已经将上面的代码放在一个working CodePen中(编辑:请注意，我现在已经更新了CodePen，以反映@RobertLongson的答案，它可以工作；请参阅下面的内容，了解为什么这不是完整的答案)。
有什么想法吗？在我的SVG代码中没有发现的拼写错误？
回答 3
Stack Overflow用户
发布于 2015-11-13 05:33:12
有一个名为coloredOut的输入，但没有名为coloredOut的输出，因此过滤器链失败。删除in="coloredOut“属性似乎可以解决这个问题。您可能想引发一个Chrome错误，说明它没有强制执行有效的过滤器链。
此外，SVG将文本向下推，因此您在代码中看不到它。将width="0“height="0”添加到<svg>元素可以解决此问题。
Stack Overflow用户
发布于 2019-05-30 08:24:04
对我来说，这是因为我在父<svg>标签上有一个display:none，我认为这会导致火狐完全忽略里面的过滤器标签。因此，将<svg style="display:none">更改为<svg style="position:absolute; height:0">确实起到了作用。
Stack Overflow用户
发布于 2021-02-06 17:32:36
根据克里斯的回答，在SVG元素上使用display:none;确实会导致它在Firefox中被忽略。
我最近遇到的一个问题是，在Chrome中去掉display:none;导致我的SVG filter输出的颜色带有更多的静音(不知道为什么)。
我最后做的就是让display:none;保持内联，然后在标题中添加一些CSS，并使用@supports (-moz-context-properties: fill)，这样它只会在火狐上触发。你不必使用这个特殊的前缀，有一个火狐只有前缀here的列表，它们中的任何一个都应该可以工作。
就像这样，确保你把它放在头的<style>标签里，否则你可能会得到一个FOUC。
@supports(-moz-context-properties: fill){
#svg_element_id{
position:fixed;
height:0;
}
}https://stackoverflow.com/questions/33676342
复制相似问题