Переход по свойству Fill с линейным градиентом внутри SVG ⇐ CSS

[Anonymous]

Я пытаюсь добиться своего рода Степпера. Все работает хорошо, за исключением перехода при заливке.


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

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

Код: Выделить всё

 Next step 

Все js здесь взяты не из моего реального кода, а для целей тестирования на SO .
Мне хотелось бы добиться плавного перехода между всеми моими шагами, но, как вы можете видеть, ни один переход никогда не срабатывает. Любая помощь приветствуется.
Ps На самом деле я работаю над Blazor, поэтому чем меньше J, тем лучше решение.

Подробнее здесь: https://stackoverflow.com/questions/787 ... ide-of-svg