Menu
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
740
The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.
The url() filter function takes in a reference to an SVG <filter> element that is to be applied to the element via the CSS filter property. The reference to the filter is the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.
Overview. The HTML Filter is an Okapi component that implements the IFilter interface for HTML and XHTML documents.
#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.
150
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With