Home » Html » SVG filter only working when added in style attribute (Firefox)

SVG filter only working when added in style attribute (Firefox)

Posted by: admin December 28, 2017 Leave a comment

Questions:

I added a blur effect svg to my HTML(text/html):

<html>
    <head>...</head>
    <body>
        ...
        <svg xmlns="http://www.w3.org/2000/svg" height="0">
            <filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
                 <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
            </filter>
        </svg>
    </body>
</html>

Which I reference to in my CSS sheet:

#page-container {
    filter: url("#svgBlur");
    -webkit-filter: blur(8px);
}

Doing this makes the #page-container appear white (FF doesn’t recognize the SVG filter).


The funky part:

When I disable the above filter rule in Firebug and readd it in the style attribute of the #page-container, it works like a charm.

<div id="page-container" style="filter: url("#svgBlur");">

What am I overseeing?


Response headers:

Cache-Control   no-cache, must-revalidate, post-check=0, pre-check=0
Connection  Keep-Alive
Content-Encoding    gzip
Content-Language    nl
Content-Length  6098
Content-Type    text/html; charset=utf-8
Date    Mon, 02 Dec 2013 14:47:01 GMT
Etag    "1385995621"
Expires Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive  timeout=15, max=100
Last-Modified   Mon, 02 Dec 2013 14:47:01 +0000
Link    </nl/node/215271>; rel="canonical",</nl/node/215271>; rel="shortlink"
Server  Apache/2.2.3 (Red Hat)
Vary    Accept-Encoding
X-Powered-By    PHP/5.3.19

Problem on Firefox 25 OSX. Webkit browsers work fine, because they use the css blur filter

Answers:

#svgBlur is a relative URL. It is converted to an absolute URL by prepending the name of the file it is in so

filter: url("#svgBlur");

in your case is really just a shorthand for

filter: url("stylesheet.css#svgBlur");

Which doesn’t point to anything.

You need to put the name of the html file in the URL

filter: url("yourhtmlfile.html#svgBlur");

will work. And that’s why it works when it’s in the html file of course as the prepended filename points to the right place in that case.

Questions:
Answers:

I included the svg as a base64 string directly into the css file.
This solved my problem.

filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)

Questions:
Answers:

It seems to work fine in firefox like so,

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="0">
   <filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
       <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
   </filter>
</svg>
<div id="page-container">
   <img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" alt="forest" />
</div>

JSFIDDLE (with an image in the div)

JSFIDDLE (with a background image on the div)

Did you included the the svg code in your html markup?

Questions:
Answers:

I have tried all the ways to solve this problem without making inline-filter (with base64 string in css) from this thread, including using full path to .svg file in url(), but the only one method solved this problem for me. Firefox see the filter only if you applying css rule in style attribute of element, or if you define css rules in inline <style></style> tag.

Questions:
Answers:

My problem that led me here was I had hidden the SVG inside of a div with “display: none” embedded in the class.

Questions:
Answers:

What zelanix said above… about adding a . before the filter as in

.blur1 {
filter:url(.#blur1);
}

Does the trick 100% and works in all browsers from what I can tell