Geek asks and answers

Div disappears after applying SVG Gaussian blur

I am trying to apply Gaussian blur to an element that has some child nodes containing some content.

For Chrome, I did this in an application style:

    -webkit-filter: blur(2px);

Firefox does not support this. What firefox supports applies SVG to elements . Knowing this, I searched google for an example where they explained how to use SVG to apply gaussian blur to an element. I found this example with this demo .

I brewed the following CSS:

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

And put this in the appropriate file HTML:

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

But when I went to check the page, I saw that div-with-contentthere was no more. He disappeared. Every time I delete the blur style with div-with-content, it appears again.

-, , , , .

+5
4

, svg: 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>
+3

, ,

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

, jsFiddle

+2

, " , HTML-, ".

, html- svg URL svg- (,

,

url('#filter-effect')


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

, , @RobertLongon, . SVG html .

-

:

Mozilla Developer Network :

SVG , .

... . ?

<style> <link>

, , .blur html-, <link>, , ​​ . , - . JSFiddle <style>. , .blur WITHIN , aka <style>...</style>

:

. HTML5, "svg:" HTML.

, <style>, <link>.

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

0
source

This is probably already 2 years old, but the name calling the document did not do this for me, but placing the style directly on an element like this worked fine:

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

More articles:


All Articles