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

Question

你好！

在 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

Answer 1

fix 将在 Firefox 29 中提供。如果您想试用，现在可以下载beta。