代码之家 › 专栏 › 技术社区 › Feanaro

应用SVG高斯模糊后Div消失

svg-filters svg firefox css html

Feanaro · 技术社区 · 12 年前

我试图将高斯模糊应用于一个元素,该元素有一些包含一些内容的子节点。

对于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 它再次出现。

有人能帮我解决这个问题吗?我已经尽力了。

5 回复 | 直到 12 年前

Michael Mullany 12 年前

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

dinodsaurus 12 年前

如果只有你想模糊的文本,有这个小技巧

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

你可以在这里看到它的工作原理 jsFiddle

Community CDub 4 年前

编辑

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

确保具有svg效果的html页面与svg效果ID一起在URL参数中传递(例如,

所以,与其

url('#filter-effect')

做

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

直到我读到@RobertLongon的评论,我才明白这是怎么回事,但现在它有意义了。您可以将所有SVG放在一个文档中,并从其他html文件中引用它们。

老答案:

Mozilla开发者网络表示:

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

……但他们都是。Bug报告?

使用 `<style>` 而不是 `<link>`

出于我无法理解的原因,如果你宣布 .blur 类,通过 <链接> ,您的元素将消失,同时仍占据空间。这就是为什么fiddles正在寻找其他答案,但实现却没有。JSFiddle使用 <样式> 。为了避免这种行为,您应该声明 变得模糊不清 类在文档中,又称 <style>...</style>

同样重要的是:

注意:名称间距在HTML5中无效,请在HTML格式文档的标记中去掉“svg:”。

再一次 <样式> 不 <链接> .

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

Nathan Arthur user2811108 6 年前

我在试图使用的过滤器上看到了同样的行为。事实证明,我还将定义过滤器的SVG设置为 display: none; 。一旦我删除了它,过滤器就可用了,并且它们所应用的HTML元素也能正确显示。

-2

user3214617 9 年前

这可能已经晚了两年,但Name调用文档对我来说并不合适,但像这样将样式直接放在元素上非常有效:

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

应用SVG高斯模糊后Div消失

编辑

老答案:

Mozilla开发者网络表示:

使用 <style> 而不是 <link>

使用 `<style>` 而不是 `<link>`