SVG Filter With Variable?

I have an SVG glow filter implemented like so:

Solution 1:

In the next example the flood-color is the current color. If you click the svg element you toggle the class "blue". The color of the svg element is red the color of the .blue is blue.

When you toggle the class blue the filter is changing the flood color.

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>

Share