过滤器：mozilla firefox <svg> 的模糊不工作

Posted 2023-05-08

【中文标题】过滤器：mozilla firefox <svg> 的模糊不工作

【英文标题】：filter:blur for mozilla firefox <svg> not working

【发布时间】：2013-01-13 18:39:10

【问题描述】：

我正在开发一个页面，该页面将为图像设置动画，并以模糊样式淡入。它在 google chrome 中有效，但在 Mozilla firefox 中无效。

我为 Mozilla firefox 尝试了这种方法。 http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/ 但图片不可见。

这是我的代码：

js:

<script type="text/javascript">
$(document).ready(function() 
    $("img").css(
        "filter": "blur(4px)", 
        "-webkit-filter": "blur(4px)", 
        "-moz-filter": "blur(4px)",
        "-o-filter": "blur(4px)",
        "-ms-filter": "blur(4px)",
        "filter":"url('#blur1')"
    );
    window.setTimeout(function() 
        $("img").css(
            "filter": "blur(3px)", 
            "-webkit-filter": "blur(3px)", 
            "-moz-filter": "blur(3px)",
            "-o-filter": "blur(3px)",
            "-ms-filter": "blur(3px)",
            "filter":"url('#blur1')"
        );
    , 3000);
    window.setTimeout(function() 
        $("img").css(
            "filter": "blur(2px)", 
            "-webkit-filter": "blur(2px)", 
            "-moz-filter": "blur(2px)",
            "-o-filter": "blur(2px)",
            "-ms-filter": "blur(2px)",
            "filter":"url('#blur1')"
        );
    , 3100);
    window.setTimeout(function() 
        $("img").css(
            "filter": "blur(1.5px)", 
            "-webkit-filter": "blur(1.5px)", 
            "-moz-filter": "blur(1.5px)",
            "-o-filter": "blur(1.5px)",
            "-ms-filter": "blur(1.5px)",
            "filter":"url('#blur1')"
        );
    , 3200);
    window.setTimeout(function() 
        $("img").css(
            "filter": "blur(1px)", 
            "-webkit-filter": "blur(1px)", 
            "-moz-filter": "blur(1px)",
            "-o-filter": "blur(1px)",
            "-ms-filter": "blur(1px)",
            "filter":"url('#blur1')"

        );
    , 3300);
    window.setTimeout(function() 
        $("img").css(
            "filter": "", 
            "-webkit-filter": "", 
            "-moz-filter": "",
            "-o-filter": "",
            "-ms-filter": "",
            "filter":"url('#blur1')"
        );
    , 3400);
    $("#promoIMG").fadeIn(5000);
);
</script>

html:

<div id="promoIMG">
    <a href="main.php"><img src="images/akb1.png"  onMouseOver="this.src='images/akb2a.png'" onMouseOut="this.src='images/akb1.png'"/></a><br/>
    <img src="images/akb2.png"  />
</div>
</div>
<svg>
    <filter id="blur1">
        <svg:feGaussianBlur stdDeviation="1"/>
     </filter>
</svg>

我哪里做错了？以及如何使其正确，以便 Mozilla firefox 的页面动画在 chrome 中相同。

提前致谢

【问题讨论】：

将该样式导出到 css 类 .blur..... ，然后在 js 中 $("img").addClass('blur'); 更容易。看看它是否有效，然后在需要时返回动态值

它不起作用，当我在 mozilla 中inspect element 并寻找img 标签时，我得到了这个element filter: url("#blur1"); 但filter 使img 不可见.. 我只是想让它变得模糊，和chrome一样

是的，我也遇到过：jsbin.com/ulufot/4/edit

你能链接到显示问题的完整页面吗？

【参考方案1】：

我知道了，我添加这个

<svg  xmlns="http://www.w3.org/2000/svg">
<filter id="blur1">
        <svg:feGaussianBlur stdDeviation="1"/>
     </filter>
</svg>

【参考方案2】：

有同样的问题；图片未显示（类似于@kidwon 的 jsbin）。 通过将 svg sn-p 放在外部文件中并通过

加载它来解决它

filter: url("/blur.svg#blur");

在 CSS 中。 引述，没有。