SVG image blur on Firefox
css, firefox, svg
Solution
Firefox does not support cross origin filters for HTML content. From the relevant blog post:
The SVG elements being used for clipping, masking, and so forth can be loaded from an external document, as long as that document comes from the same origin as the HTML document to which it's applied.
Problem
I am trying to blur an image on Firefox using the SVG technique proposed here. However this very simple example is not working on Firefox (I am version 25) JSFiddle. HTML ``` <img class="blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" /> ``` CSS ``` .blur { filter: url("http://d2oujmlvvb0w9i.cloudfront.net/images/v4/blur.svg#blur") } ``` Any help? Thank you