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

【问题标题】：SVG filter not showing up in Firefox, working fine in ChromeSVG 过滤器未在 Firefox 中显示，在 Chrome 中运行良好
【发布时间】：2016-02-14 01:35:52
【问题描述】：

我希望深色背景上的一段深色文本在其外部具有白光。虽然 CSS 中的default drop shadow filter（如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 以反映@RobertLongson 的答案并且它有效；请参阅下文了解为什么这不是完整答案）。

有什么想法吗？我的 SVG 代码中没有发现错字？

【问题讨论】：

标签： html google-chrome firefox svg svg-filters

【解决方案1】：

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

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

【讨论】：

感谢您发现这一点！确实，当我修复它时，codepen 示例有效。但是，在我的原始代码中，它并没有......将在适当的时候调查并接受。

【解决方案2】：

@RobertLongson 的回答非常好，并提供了部分解决方案。在我提供的 codepen 中，当我实施他的修复时，一切正常。但是，我自己的代码仍然无法正常工作。

关键是在实际代码中，我的 CSS 位于外部文件中。事实证明，Firefox（正确！）将我在 filter: url(#my-drop-shadow) 中的选择器解释为引用 CSS 文件，而不是链接到 CSS 的 HTML 文档。当我将其指定为 URL + 选择器时，如filter: url(../../index.html#my-drop-shadow)，一切正常。（或者，我可以将 filter 放在同一 HTML 文档中的 <style></style> 元素中。）

来源（为什么 Firefox 是正确的）；来自CSS 2.1 spec：

为了创建不依赖于资源的绝对位置，作者可以使用相对 URI。相对 URI（定义在 [RFC3986] 中）被解析为完整的 URI 使用基本 URI。 RFC 3986 第 5 节定义了规范算法对于这个过程。对于 CSS 样式表，基本 URI 是样式表，而不是源文档的样式表。

【讨论】：

非常非常有用的观察。但是，Chrome 以一种或另一种方式拒绝。我的解决方案确实是只内联添加过滤器：<rect style="filter:url(#mydropshadow)" class="person" x="5" y="5" ...> 。将研究如何让 Chrome 使用相对 URL 表示法

【解决方案3】：

对我来说，是我在父 <svg> 标签上有一个 display:none，我认为这会导致 Firefox 完全忽略里面的过滤器标签。所以将<svg style="display:none"> 更改为<svg style="position:absolute; height:0"> 就成功了。

【讨论】：

【解决方案4】：

为了借鉴 Chris 的回答，在 SVG 元素上添加 display:none; 确实会导致它在 Firefox 中被忽略。

我最近遇到的一个问题是，去掉 Chrome 中的 display:none; 会导致它以更柔和的色调渲染我的 SVG 过滤器输出的颜色（不知道为什么）。

我最终做的是离开 display:none; 内联，然后在标题中添加一些 CSS 并使用 @supports (-moz-context-properties: fill) 所以它只会在 Firefox 上触发。您不必使用那个特定的前缀，有一个 Firefox 前缀列表 here，它们中的任何一个都应该可以工作。

像这样的东西，确保你把它放在标题的<style>标签内，否则你可能会得到一个FOUC。

@supports(-moz-context-properties: fill){
     #svg_element_id{
          position:fixed;
          height:0;
     }
}

【讨论】：