Search code examples
htmlcssfirefoxsvgsvg-filters

Div disappears after applying SVG Gaussian blur

I'm trying to apply a Gaussian blur to an element which has some child nodes containing some content.

For Chrome I did in the applied style:

    -webkit-filter: blur(2px);

Firefox doesn't support this. What firefox does support is applying SVG to elements. Knowing this I searched google for an example where they would explain how to use SVG to apply a gaussian blur to an element. I found this example with this demo.

I brewed up the following CSS:

    #div-with-content{
        -webkit-filter: blur(2px);
        filter: url('#blur');
    }

And put this into the corresponding HTML file:

    <svg:svg>
        <svg:filter id="blur">
            <svg:feGaussianBlur stdDeviation="2"/>
        </svg:filter>
    </svg:svg>

But when I went to test the page I saw that div-with-content wasn't there anymore. It had disappeared. Everytime I remove the blur style from div-with-content it appears again.

Could anyone please help me out on this one, I've really tried everything within my knowledge.

Solution

  • I don't know if it's your apostrophes or your svg: but this version works perfectly in Firefox:

    CSS:
#div-with-content{
        filter: url("#blur");
    }


HTML:
<svg>
   <filter id="blur">
       <feGaussianBlur stdDeviation="2"/>
   </filter>
</svg>

<div id="div-with-content"> WOohooo</div>