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

Martijn Dierckx picture Martijn Dierckx · Dec 2, 2013 · Viewed 10k times · Source

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

Answer

Robert Longson picture Robert Longson · Dec 2, 2013

#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.