Question

我正在尝试使用提出的here提供的SVG技术在Firefox上模糊图像。

然而，这个非常简单的例子不适用于Firefox（我是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

我使用此POST来创建模糊效果，但我添加了编码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);
}

DEMO

SVG文件代码

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

Answer 2

Firefox不支持HTML内容的跨源过滤器。来自相关博客文章：

用于剪切，屏蔽等的SVG元素可以是从外部文档加载，只要该文档来自与其应用的HTML文档的原点相同。

Firefox上的SVG图像模糊

2 个答案: