svg模糊过滤器不工作在Firefox中

我想使用模糊svg过滤器作为外部文件，并通过CSS属性链接它。svg模糊过滤器不工作在Firefox中

我可以用colorMatrix过滤器成功地做到这一点，但是当我将其更改为GaussianBlur时，图像消失。

的HTML和CSS很容易

<div class="demo"> 
    <img src="./frost_files/demo.jpg"></img> 
</div> 

.demo { 
    filter: url(blur.svg#blur); 
}

和文件blur.svg包含：

<svg version="1.1" height="0" xmlns="http://www.w3.org/2000/svg"> 
    <filter id="blur"> 
     <feGaussianBlur stdDeviation="1"/> 
    <filter> 
</svg>

，做工作SVG文件包含：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<filter id="grey"> 
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 0 0 
0 0 0 1 0"/> 
</filter> 
</svg>

我有看到这个答案：filter:blur for mozilla firefox not working （这就是为什么我加了height =“0”）。我尝试了所有可能的名称空间组合，svg：svg：svg：filter，svg：feGaussianBur等，但没有解决问题。

来源

2013-06-18 vals

您已将XML过滤器关闭标记</filter>编写为<filter>即另一个打开。所有你需要的是倒数第一行上的一个字符变化...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <filter id="blur"> 
     <feGaussianBlur stdDeviation="1"/> 
    </filter> 
</svg>

来源

2013-06-18 19:22:41

傻我...我已经删除它编辑从 ..谢谢！ – vals

，这是否正确？ .demo { filter：url（blur.svg＃blur）; } –

@GCyrillus这是因为这是一个名为blur.svg的外部文件。 Whitout说，它是内联的。 – vals

你有两个错误：

的URL过滤
名称空间滤波器

http://codepen.io/gcyrillus/pen/vnlEL

<svg xmlns="http://www.w3.org/2000/svg"> 
<filter id="blur1"> 
     <feGaussianBlur stdDeviation="3"/> 
    </filter> 
</svg>

.demo{ 
    filter: url('#blur1'); 
    float:left; 
} 

.demo2{ 
    filter: url('#grey'); 
}

前

来源

2013-06-18 18:58:48

svg模糊过滤器不工作在Firefox中

回答

相关问题