SVG 辉光滤镜显示错误的颜色答案

【问题标题】：SVG glow filter showing wrong colorSVG 辉光滤镜显示错误的颜色
【发布时间】：2019-01-01 05:58:12
【问题描述】：

我几乎完全采用了filter code from here（只是使用泛色、半径和标准偏差来获得我想要的确切效果）：

    <defs>
        <filter id="sofGlow" height="300%" width="300%" x="-75%" y="-75%">
        <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken" />
        <feGaussianBlur in="thicken" stdDeviation="10" result="blurred" />
        <feFlood flood-color="rgb(0,186,255)" result="glowColor" />
        <feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored" />
        <feMerge>
            <feMergeNode in="softGlow_colored"/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</defs>

我将它应用到我正在处理的一个 SVG 上，结果符合预期 - 一种淡蓝色的光芒。

然后我尝试将它应用到另一个 SVG 上，结果就像黑色的光芒一样。我什至尝试将泛色更改为rgb(255, 0, 0)，但它仍然看起来是黑色的。

为什么会这样，我能做些什么来解决它？

【问题讨论】：

请创建一个minimal reproducible example，您尚未向我们展示您将其应用于什么 SVG 以获得您描述的效果

标签： svg svg-filters

【解决方案1】：

这里是演示。 https://codepen.io/vccodepen/pen/qyjoNr

您可以在同一个<svg> 中设置两个过滤器并赋予不同的ID 名称。在其他<svg>，只需分配您想要的过滤器ID。

【讨论】：