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

Question

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

    ...
    
        ...
        

Answer 1

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