应用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>

Answer 2

如果只有文字你想模糊，那就有这个小技巧

p{
   color: transparent;
   text-shadow: 0 0 4px #222;
}

你可以在这里看到它如何工作jsFiddle

Answer 3

edit

You can load from an external document，只要“该文档来自与其应用的HTML文档相同的来源”。

确保在URL参数中传递具有svg效果的html页面以及svg效果的ID（例如，

所以，而不是

url('#filter-effect')

做

filter: url('index.html#filter-effect')

在我阅读@RobertLongon的评论之前，这对我来说并不是很明显，但现在它才有意义。您可以将所有SVG放在一个文档中，并从其他html文件中引用它们。

-

Old Answer:

Mozilla开发者网络说：

您可以在同一文档中或外部样式表中指定样式的SVG。

......但他们充满了它。错误报告？

use <style> instead of <link>

由于我无法理解的原因，如果你通过.blur在html文档之外声明<link>类，你的元素将在占据空间时消失。这就是为什么小提琴正在其他答案中工作但实现不是。 JSFiddle使用<style>在文档中附加您的样式。要避免这种行为，您应该在文档中声明.blur类，也就是<style>...</style>

同样重要的是

注意：命名空间在HTML5中无效，请在HTML格式文档的标签中保留“svg：”。

再次，<style>，而不是<link>。

来源： 反复试验 mdn: Applying SVG effects to HTML content

Answer 4

我看到了与我试图使用的过滤器相同的行为。事实证明，我还设置了过滤器定义为display: none;的SVG。删除后，过滤器可用，并且应用它们的HTML元素正确显示。

Answer 5

这可能是2年太晚了，但调用文档的Name并没有为我做，但将样式直接放在像这样的元素上工作得很好：

<div class="imageblur" style="filter:url(#blur) ">