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

Question

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

    ...
    
        ...
        

Answer 1

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

Answer 2

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)

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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?