SVG过滤器未在Firefox中显示，在Chrome中工作正常 [英] SVG filter not showing up in Firefox, working fine in Chrome

问题描述

我希望在深色背景上的一段深色文字在其外部具有白色发光.尽管

在Firefox(版本42.0)上的结果:

我已将上面的代码放在可工作的CodePen 中(请注意，现在已经更新了CodePen以反映@RobertLongson的答案，并且可以正常工作；请参阅以下内容，了解为什么这不是完整的答案.

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

解决方案

这里有一个名为colouredOut的输入，但没有名为coloredOut的输出，因此过滤器链失败了.删除in ="coloredOut"属性似乎可以解决该问题.您可能要引起一个Chrome错误，该错误未强制使用有效的过滤器链.

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

I want a piece of dark text on dark background to have a white glow outside of it. Although the default drop shadow filter in CSS (like filter: drop-shadow(2px 2px 2px black)) officially should support a 'spread-radius' fourth attribute, support for this attribute is basically non-existent. Without this extra spread, the drop shadow will not be big enough to allow the text to be read.

So, I decided to define my own filter in an SVG tag, including a dilation operation to implement the extra spread, and apply that to the text instead. This filter works fine in Chrome, but causes the text to become entirely invisible in Firefox (both tested under Ubuntu 14.04). According to caniuse.com (usually very reliable, I've found), Firefox should support the filter perfectly fine.

The HTML code with SVG filter:

<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>

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

Result on Chrome (version 46.0.2490.80 (64-bit)):

Result on Firefox (version 42.0):

I've put the code above in a working CodePen (edit: note that I've now updated the CodePen to reflect @RobertLongson's answer and it works; see below though for why this was not the full answer).

Any ideas? Typo I haven't spotted in my SVG code?

解决方案

There's an input called coloredOut but no output called coloredOut so the filter chain fails. Removing the in="coloredOut" attribute seems to fix that. You might want to raise a Chrome bug that it's not enforcing valid filter chains.

In addition the SVG pushes the text down so you can't see it in the codepen. Adding width="0" height="0" to the <svg> element fixes that issue.

这篇关于SVG过滤器未在Firefox中显示，在Chrome中工作正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！