html - 带变量的 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 元素，则会切换类“蓝色”。 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>