火狐上的SVG图像模糊

Question

我正在尝试使用SVG技术来模糊火狐上的图像，建议使用这里。

然而，这个非常简单的例子并不适用于火狐(我是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")    
} 

有什么帮助吗？

谢谢

Answer 1

Firefox不支持HTML内容的跨源筛选器。在相关博客文章中：

用于裁剪、掩蔽等的SVG元素可以从外部文档加载，只要该文档来自与其应用的HTML文档相同的来源。

Answer 2

我使用这个帖子来创建模糊效果，但是我添加了编码base64。

img.blur { 
    filter: blur(3px);
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPGZpbHRlciBpZD0iYmx1ciI+DQoJCTxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiIC8+DQoJPC9maWx0ZXI+DQo8L3N2Zz4=#blur);
}

演示

SVG文件代码

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="blur">
        <feGaussianBlur stdDeviation="3" />
    </filter>
</svg>