html - 应用SVG高斯模糊后Div消失

我正在尝试对具有一些包含某些内容的子节点的元素应用高斯模糊。

对于Chrome，我采用的是适用样式:

    -webkit-filter: blur(2px);

Firefox不支持此功能。 firefox支持的功能是applying SVG to elements。知道了这一点，我在google上搜索了一个示例，他们将解释如何使用SVG将高斯模糊应用于元素。我找到了this example和this demo。

我酿造了以下CSS:

    #div-with-content{
        -webkit-filter: blur(2px);
        filter: url('#blur');
    }

并将其放入相应的HTML文件中:

    <svg:svg>
        <svg:filter id="blur">
            <svg:feGaussianBlur stdDeviation="2"/>
        </svg:filter>
    </svg:svg>

但是，当我去测试页面时，我发现不再有div-with-content了。它不见了。每当我从div-with-content中删除模糊样式时，它就会再次出现。

任何人都可以帮我解决这个问题，我已经尽我所能尝试了一切。

最佳答案

我不知道这是您的撇号还是您的svg:但是此版本在Firefox中非常有效:

CSS:
#div-with-content{
        filter: url("#blur");
    }


HTML:
<svg>
   <filter id="blur">
       <feGaussianBlur stdDeviation="2"/>
   </filter>
</svg>

<div id="div-with-content"> WOohooo</div>

关于html - 应用SVG高斯模糊后Div消失，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14971288/