SVG过滤器没有显示在Firefox中，在Chrome中正常工作

我想在深色背景上有一块黑色的文字在它的外面有白色的光晕。虽然CSS中的default drop shadow filter（如filter: drop-shadow(2px 2px 2px black)）正式应该支持“传播半径”第四个属性，但对该属性的支持基本上不存在。如果没有这种额外的传播，阴影将不足以让文本被读取。SVG过滤器没有显示在Firefox中，在Chrome中正常工作

因此，我决定在SVG标签中定义我自己的过滤器，包括扩展操作以实现额外传播，并将其应用于文本。该过滤器在Chrome中运行正常，但导致文本在Firefox中完全不可见（均在Ubuntu 14.04下测试过）。根据caniuse.com（通常非常可靠，我找到了），Firefox应该支持过滤器非常好。

的HTML代码与SVG滤波器：

<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：在Chrome

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

结果（版本46.0.2490.80（64位））：

Firefox上的结果（版本42.0）：

我已经把上面的代码中working CodePen（编辑：请注意，我现在已经更新了CodePen以反映@ RobertLongson的答案，它的工作原理;但为什么这不是完整的答案）。

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

来源

2015-11-12 EelkeSpaak

有一个名为coloredOut的输入，但没有名为coloredOut的输出，所以过滤器链失败。去除in =“coloredOut”属性似乎可以解决这个问题。您可能需要提出一个Chrome漏洞，它并不强制执行有效的筛选器链。

此外，SVG将文本向下推，以便在代码中看不到它。向<svg>元素添加width =“0”height =“0”可修复该问题。

来源

2015-11-12 21:33:12

感谢察觉的！事实上，当我修复它时，codepen示例正常运行。但是，在我原来的代码中，它不会...将在适当的时候进行调查和接受。 – EelkeSpaak

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

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

源（为什么Firefox是正确的）;从CSS 2.1 spec：

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

来源

2015-11-13 10:03:28 EelkeSpaak

非常非常有用的观察。不过，Chrome会拒绝这种或那种方式。我的解决方案确实是内联添加仅筛选器： '''rect style =“filter：url（#mydropshadow）”class =“person”x =“5”y =“5”...>'。将调查如何让Chrome使用相对URL符号 – Pianoman

SVG过滤器没有显示在Firefox中，在Chrome中正常工作

回答

相关问题