Svg Filter With Variable?

Question

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.

Baca Juga

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;}

<svgid="test"viewBox="0 0 100 70"><filterid="outline"><feMorphologyin="SourceAlpha"operator="dilate"radius="2"></feMorphology><feGaussianBlurstdDeviation="1"result="dilated"></feGaussianBlur><feFloodstyle="flood-color: currentcolor"></feFlood><feCompositein2="dilated"operator="in"></feComposite><feMerge><feMergeNode></feMergeNode><feMergeNodein="SourceGraphic"></feMergeNode></feMerge></filter><textx="50"y="40"filter="url(#outline)">click</text></svg>

Html5 Website

Svg Filter With Variable?

Solution 1:

Post a Comment for "Svg Filter With Variable?"