Question

我想在深色背景上留下一段深色文字，使其外面有白色光晕。虽然CSS中的default drop shadow filter（如filter: drop-shadow(2px 2px 2px black)）正式应支持'spread-radius'第四属性，但对此属性的支持基本上不存在。如果没有这种额外的传播，投影将不会大到允许阅读文本。

因此，我决定在SVG标记中定义自己的过滤器，包括扩展操作以实现额外的扩散，并将其应用于文本。此过滤器在Chrome中运行良好，但导致文本在Firefox中完全不可见（均在Ubuntu 14.04下测试）。根据{{3}}（通常非常可靠，我发现），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位））：

caniuse.com

Firefox（版本42.0）上的结果：

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

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

Answer 1

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

此外，SVG将文本向下推，这样您就无法在codepen中看到它。添加宽度=＆＃34; 0＆＃34;高度=＆＃34; 0＆＃34; <svg>元素修复了该问题。

Answer 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是样式表，而不是源文档。

Answer 3

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

Answer 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;
     }
}

SVG过滤器没有在Firefox中显示，在Chrome中运行良好

4 个答案: