Question

我有一个像这样实现的SVG发光滤镜：

<filter id="outline">
    <feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur stdDeviation="1" result="dilated"></feGaussianBlur>
    <feFlood style="flood-color: #RRGGBB"></feFlood>
    <feComposite in2="dilated" operator="in"></feComposite>
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

这很好用，但仅适用于一种特定的发光颜色。

我希望能够具有任意的发光颜色，以某种方式将变量传递到flood-color属性中。

我尝试使用currentColor，但这似乎是定义过滤器时的颜色，而不是应用过滤器时的颜色。

我可以为每种颜色定义一个过滤器（它们的数量有限），但是只需要定义一次就更好了，当然还可以节省空间。这可能吗？如果可以，怎么办？

Answer 1

在下一个示例中，flood-color是当前颜色。如果单击svg元素，则切换类“蓝色”。 svg元素的color为red，.blue的颜色为蓝色。

当您将班级切换为蓝色时，滤镜将更改泛色。

test.addEventListener("click",()=>{
  test.classList.toggle("blue")
})

svg {
  border: 1px solid;
  font-size: 40px;
  text-anchor: middle;
  dominant-baseline: middle;
  width:100px;
  color:red;
}

.blue{color:blue;}

<svg id="test"  viewBox="0 0 100 70">
  
  <filter id="outline">
    <feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur stdDeviation="1" result="dilated"></feGaussianBlur>
    <feFlood style="flood-color: currentcolor"></feFlood>
    <feComposite in2="dilated" operator="in"></feComposite>
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>
  
<text x="50" y="40" filter="url(#outline)">click</text>
  
</svg>

SVG过滤器具有变量？

1 个答案: