SVG高斯模糊过滤器导致意外的绿光



Yello!

在Firefoxy中的SVG文本元素上使用高斯模糊过滤器时,我遇到了一个奇怪的情况。我试着在网上搜索解决方案,但我甚至找不到任何提到这个问题的东西。这里有一个可复制的例子(以及JSFiddle):

<svg id="svg1" width="100%" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs>
        <filter id="filterBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blurOut" />
            <feBlend in="SourceGraphic" in2="blurOut" />
        </filter>
    </defs>
    <text class="link" x="100" y="100">Hello World</text>
</svg>

和CSS

body {background-color:black;}
text {
    font-family: "Arial";
    fill: white;
}
.link {
    font-size: 20px;
    opacity: 0.90;
    letter-spacing: 3px;
    font-weight: bold;
    filter: url(#filterBlur);
}

我试过几种字体,但它们都呈现出同样的绿色光泽。在Chrome中,模糊效果很好。有什么想法吗?

D

Firefox 29将对此进行修复。如果你想尝试的话,现在就可以下载测试版了。

相关内容

  • 没有找到相关文章

最新更新