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

Question

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

11.1k views Asked by Martijn Dierckx At 02 December 2013 at 14:03

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

Original Q&A

There are 7 answers

Josh Powell On 02 December 2013 at 14:18

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?

Robert Longson On 02 December 2013 at 14:24

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

SkipIntro On 08 December 2015 at 07:39

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.

Morten On 11 December 2015 at 21:37

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

semyonfilippov On 27 June 2020 at 07:09

In my case Firefox didn't find an SVG filter because of the CSS rule:

#svg-filters {
    display: none;
}

where svg-filters is the id of the <svg> tag containing all filters definitions. Replaced those lines with

#svg-filters {
    position: absolute;
    height: 0;
    width: 0;
}

and filters work fine in FF.

Referencing filters relative to the HTML document from CSS works fine in major browsers, as pointed out by Josh Powell in his answer.

theGleep On 12 June 2017 at 17:04

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

**Martijn Dierckx** · Accepted Answer · 2013-12-02 18:57:03

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)

TechQA.

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

There are 7 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in FIREFOX

Related Questions in SVG

Related Questions in SVG-FILTERS

Popular Questions

Popular Tags

Trending Questions