Search code examples
htmlcssfirefoxsvgsvg-filters

Blur effect filter for Firefox

I am trying to find a Firefox substitute for: filter: blur(3px);, which will only be supported on Firefox 34. Research has pointed me to SVG filters.

I am able to apply a grayscale effect with SVG with this line of CSS:

filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></svg>"); /* Firefox 10+, Firefox on Android */

Unfortunately, nothing happens when I try something similar for blur, changing the filter function, but sticking to the same syntax.

   filter: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><feGaussianBlur stdDeviation="10"/></svg>")

Can you help me fix it?

I've seen a few examples that modify the html files. However, this is not desirable for me considering that Firefox 34 will be available in a couple of months ( and so I'd rather keep it clean and simple).

Solution

  • You need to point the datauri to the filter itself using an id / anchor.

    filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='blur10'><feGaussianBlur  stdDeviation='10' /></filter></svg>#blur10");

    here is an article that explains this (much better than i could ith my poor english) : http://benfrain.com/applying-multiple-svg-filter-effects-defined-in-css-or-html/