SVG filter does not appear in Firefox, works fine in Chrome

Question

I want a piece of dark text on a dark background to have a white glow outside. Although the default drop filter in CSS (for example filter: drop-shadow(2px 2px 2px black)) should officially support the fourth “distribution radius” attribute, support for this attribute basically does not exist. Without this additional distribution, the shadow would not be large enough for the text to be read.

So, I decided to define my own filter in the SVG tag, including the extension operation, to implement an additional spread, and apply this instead of text. This filter works fine in Chrome, but at the same time the text becomes completely invisible in Firefox (both tested in Ubuntu 14.04). According to caniuse.com (usually very reliable, I found), Firefox should support the filter perfectly.

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>

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 in Chrome (version 46.0.2490.80 (64-bit)):

Result in Firefox (version 42.0):

I put the code above into a working CodePen (change: note that I updated CodePen to reflect @RobertLongson's answer and it works, see below, although for what it was not a complete answer).

Any ideas? Typo I did not notice in my SVG code?

Answer 1

, colorOut, , colorOut, . in = "colorOut", , . , Chrome, .

, SVG , . width = "0" height = "0" <svg> .

Answer 2

@RobertLongson . , , , . .

, CSS . , Firefox (!) filter: url(#my-drop-shadow) CSS , HTML-, CSS. 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 - , .