Question
I added a blur effect svg to my HTML(text/html):
https://stackoverflow.com/questions/20330149
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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
Solution 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)
OTHER TIPS
#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.
My problem that led me here was I had hidden the SVG inside of a div with "display: none" embedded in the class.
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?
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.
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.
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
