Looking to implement a stepper functionality, everything is working smoothly except for the transition on the fill.
let step = 0;
document.querySelector("button").addEventListener('click', () => {
step++;
document.querySelector("svg").style.fill = `url(#lg-step-${step})`
}).stepper {
transition-property: fill;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}<svg id="test_svg" viewBox="0 0 620 50" width="300" height="20" fill="url(#lg-step-0)" stroke="black" stroke-width="1" class="stepper">
<path d="m 71 29 h -60 c -14 0 -14 -19 0 -19 h 60 c 6 -10 19 -10 25 0 h 200 c 6 -10 19 -10 25 0 h 200 c 6 -10 19 -10 25 0 h 60 c 14 0 14 19 0 19 h -60 c -6 10 -19 10 -25 0 h -200 c -6 10 -19 10 -25 0 h -200 c -6 10 -19 10 -25 0 h 60 c 14 0 14 19 0 19 h -60 c -6 10 -19 10 -25 0 h -200 c -6 10 -19 10 -25 0 h -200 c -6 10 -19 10 -25 0" />
<linearGradient id="lg-step-0">
<stop offset="0%" stop-color="blue" />
<stop offset="6%" stop-color="blue" stop-opacity="60%" />
<stop offset="6%" stop-color="transparent" />
</linearGradient>
<linearGradient id="lg-step-1" >
<stop offset="0%" stop-color="blue" />
<stop offset="14%" stop-color="blue" stop-opacity="60%"/>
<stop offset="14%" stop-color="transparent" />
</linearGradient>
<linearGradient id="lg-step-2">
<stop offset="0%" stop-color="blue" />
<stop offset="50%" stop-color="blue" stop-opacity="60%" />
<stop offset="50%" stop-color="transparent" />
</linearGradient>
<linearGradient id="lg-step-3">
<stop offset="0%" stop-color="blue" />
<stop offset="87%" stop-color="blue" stop-opacity="60%" />
<stop offset="87%" stop-color="transparent" />
</linearGradient>
</svg>
<button> Next step </button>The JavaScript used here is just for testing purposes and not from my actual codebase.
Seeking help to achieve a smooth transition between all steps as outlined above. Any assistance would be greatly appreciated.
PS: Currently working with Blazor, so solutions requiring minimal JS are preferred.