Div disappears after applying SVG Gaussian blur

Question

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.

Answer 1

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>

Answer 2

If there is only text you would like to blur there is this little trick

p{
   color: transparent;
   text-shadow: 0 0 4px #222;
}

You can see it here how it works jsFiddle

Answer 3

edit

You can load from an external document, as long as "that document comes from the same origin as the HTML document to which it's applied".

Make sure the html page that has the svg effect is being passed in the URL argument along with the ID of the svg effect (for instance,

So, instead of

url('#filter-effect')

do

filter: url('index.html#filter-effect')

It wasn't obvious to me how this worked until I read @RobertLongon's comment, but it makes sense now. You can put all your SVGs in a single document and reference them from other html files.

-

Old Answer:

Mozilla Developer Network says:

You may specify SVG in styles either within the same document, or within an external style sheet.

...but they're full of it. Bug report?

use <style> instead of <link>

For reasons beyond my comprehension, if you declare the .blur class outside the html document, via <link>, your element will disappear while still occupying space. This is why the fiddles are working in other answers but implementation is not. JSFiddle appends your styles within the document using <style>. To avoid this behavior, you should instead declare the .blur class WITHIN the document, aka <style>...</style>

Also important:

NOTE: Namespacing is not valid in HTML5, leave off the "svg:" in tags for HTML-format documents.

Again, <style>, not <link>.

sources:
trial and error
mdn: Applying SVG effects to HTML content

Answer 4

I saw the same behavior with a filter I was trying to use. It turns out that I had also set the SVG where the filter was defined to display: none;. Once I removed that, the filters were available and the HTML elements they were applied to displayed properly.

Answer 5

This is probably 2 years too late, but Name calling the document didn't do it for me, but placing the style directly on the element like this worked perfectly:

<div class="imageblur" style="filter:url(#blur) ">