带变量的SVG过滤器？

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 元素，则会切换类“蓝色”。colorsvg 元素的颜色是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>