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

Question

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

对于 Chrome，我采用应用样式:

    -webkit-filter: blur(2px);

Firefox 不支持这个。 firefox 支持的是 applying SVG to elements .知道这一点后，我在谷歌上搜索了一个示例，他们将在其中解释如何使用 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 中删除模糊样式时，它都会再次出现。

谁能帮我解决这个问题，我真的已经尝试了我所知道的一切。

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>