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

修改

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

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

所以，而不是

url('#filter-effect')

DO

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

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

-

旧答案：

Mozilla开发者网络说：

  

    

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

  

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

使用<style>代替<link>

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

同样重要的是：

  

    

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

  

再次，<style>，而非<link>。

来源：
试错了 mdn: Applying SVG effects to HTML content

Answer 4

我在尝试使用的过滤器中看到了相同的行为。事实证明，我还已将定义过滤器的SVG设置为DECLARE @batchsize bigint = 1000; WHILE 1 = 1 BEGIN UPDATE TOP (@batchsize) Table1 SET Row1 = 'To1' -- want to set To2, To3, To4, To5, etc. depending on what was in there already FROM (SELECT TOP (@batchsize) Id FROM Table1 ORDER BY TimeStamp DESC) tto WHERE Table1.Row1 in ('From1', 'From2', 'From3', 'From4', 'From5') AND Table1.Id = tto.Id; if @@ROWCOUNT < @batchsize BEGIN PRINT('All Done'); BREAK; END; END; 。删除该过滤器后，就可以使用过滤器，并正确显示应用了它们的HTML元素。

Answer 5

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

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