问

Firefox上的SVG图像模糊

ze602 发布于 2023-02-12 17:17

svg

我正在尝试使用此处提出的SVG技术在Firefox上模糊图像.

然而,这个非常简单的例子不适用于Firefox(我是25版)JSFiddle.

HTML

CSS

.blur {
    filter: url("http://d2oujmlvvb0w9i.cloudfront.net/images/v4/blur.svg#blur")    
}

有帮助吗？
谢谢

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>

2023-02-12 17:21 回答

邹飞邹飞邹飞

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签