html - SVG 过滤器在 Firefox 中不显示，在 Chrome 中工作正常

Question

我想要在深色背景上的一段深色文本在其外部发出白光。虽然default drop shadow filter在 CSS 中(如 filter: drop-shadow(2px 2px 2px black))官方应该支持“spread-radius”第四个属性，对这个属性的支持基本上不存在。如果没有这种额外的扩展，投影将不会大到足以让文本被阅读。

因此，我决定在 SVG 标记中定义我自己的过滤器，包括用于实现额外展开的膨胀操作，并将其应用于文本。此过滤器在 Chrome 中运行良好，但会导致文本在 Firefox 中完全不可见(均在 Ubuntu 14.04 下测试)。根据caniuse.com (我发现通常非常可靠)，Firefox 应该完美支持过滤器。

带有 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 以反射(reflect)@RobertLongson 的回答并且它有效；请参阅下文了解为什么这不是完整的答案)。

有什么想法吗？我没有在我的 SVG 代码中发现拼写错误？

Answer 1

对我来说，我有一个 display:none在 parent 身上<svg>我认为这会导致 Firefox 完全忽略其中的过滤器标签。这么变<svg style="display:none">至 <svg style="position:absolute; height:0">成功了。