SVG 过滤器未显示在 Firefox 中，但在 Chrome 中运行良好

Question

我想要一段深色背景上的深色文字，外面有白色的光芒。尽管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）上：

我已经将上面的代码放在一个有效的 CodePen 中（编辑：请注意，我现在已经更新了 CodePen 以反映@RobertLongson 的答案并且它有效；但请参阅下文了解为什么这不是完整答案）。

有任何想法吗？我在 SVG 代码中没有发现错别字？

Answer 1

有一个名为 colourOut 的输入，但没有名为 colourOut 的输出，因此过滤器链失败。删除 in="coloredOut" 属性似乎可以解决这个问题。您可能想要提出一个 Chrome 错误，即它没有强制执行有效的过滤器链。

此外，SVG 将文本向下推，因此您无法在代码笔中看到它。向<svg>元素添加 width="0" height="0" 可以解决该问题。

Answer 2

对我来说，这是我display:none在父<svg>标签上有一个我认为导致 Firefox 完全忽略内部过滤器标签的原因。因此，改变<svg style="display:none">到<svg style="position:absolute; height:0">的伎俩。