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

对我来说，我的父

display:none

标签上有一个

<svg>

，我认为这会导致 Firefox 完全忽略其中的过滤器标签。因此，将

<svg style="display:none">

更改为

<svg style="position:absolute; height:0">

就成功了。

Answer 2

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

此外，SVG 会将文本向下推，这样您就无法在 codepen 中看到它。将 width="0" height="0" 添加到

<svg>

元素可以解决该问题。

Answer 3

@RobertLongson 的回答非常好，并提供了部分解决方案。在我提供的代码笔中，当我实施他的修复时，一切正常。然而我自己的代码还是不能正常运行。

关键的是，在实际代码中，我的 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规范：

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

Answer 4

借鉴 Chris 的答案，在 SVG 元素上使用

display:none;

确实会导致它在 Firefox 中被忽略。

我最近遇到的一个问题是，去掉 Chrome 中的

display:none;

会导致它以更柔和的色调渲染我的 SVG 过滤器输出的颜色（不知道为什么）。

我最终做的是保留

display:none;

内联，然后在标题中添加一些 CSS 并使用

@supports (-moz-context-properties: fill)

，这样它只会在 Firefox 上触发。您不必使用该特定前缀，这里有一个仅适用于 Firefox 的前缀列表，其中任何一个都应该有效。 类似这样的东西，请确保将其放入标题中的

<style>

标签内，否则最终可能会得到

FOUC

。

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

Answer 5

display:none

隐藏时，我也经历了 chrome 中的撕裂和视觉伪影。

然而，针对 Firefox 的

@supports

CSS 对我来说不起作用。所以我再次使用了 stackoverflow 问题中的 CSS：

Targeting only Firefox with CSS

.svg-filter {
  display: none;
}

@-moz-document url-prefix() {
  .svg-filter {
      display: block;
  }
}