应用SVG高斯模糊后,Div消失

Question

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

对于Chrome我在应用风格中做了:

    -webkit-filter: blur(2px);

Firefox不支持此功能.firefox支持的是将SVG应用于元素.知道了这一点,我搜索谷歌的例子,他们将解释如何使用SVG将高斯模糊应用于元素.我发现这个例子与此演示.

我酿造了以下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再次出现.

任何人都可以帮我解决这个问题,我真的在我的知识范围内尝试了一切.

Answer 1

我不知道这是你的撇号还是你的 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>