SVG gaussian blur filter causing an unexpected greenish glow

Question

Yello!

I have a strange occurence when using a gaussian blur filter on an SVG text element in Firefoxy. I tried searching the web for solutions but I haven't even been able to find anything mentioning this issue. Here's a reproducible example (and the JSFiddle):

<svg id="svg1" width="100%" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

    <defs>
        <filter id="filterBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blurOut" />
            <feBlend in="SourceGraphic" in2="blurOut" />
        </filter>
    </defs>

    <text class="link" x="100" y="100">Hello World</text>

</svg>

And the CSS

body {background-color:black;}

text {
    font-family: "Arial";
    fill: white;
}

.link {
    font-size: 20px;
    opacity: 0.90;
    letter-spacing: 3px;
    font-weight: bold;
    filter: url(#filterBlur);
}

I have tried several fonts but they all exhibit the same greenish glow. In Chrome the blur works just fine. Any ideas?

D

Answer 1

A fix for this is coming in Firefox 29. You can download the beta now if you want to try it.