Transition delay on svg linear gradient x y stop positions

Ignition
1

Is there a way of adding a transition delay for gradient stop positions in the svg element using the styles?

I am changing the stop positions for y1 and y2 and want the transition between the two positions to be gradual and not instant.

2

It doesnt quite work like that :confused:

But for something simle going from edge to y... you can "cheat" with the position transition.

You will have to use the css style instead of the svg element though

background: linear-gradient(yellow 30%, green 40%, blue 50%)
background-size: 100% 200%; (if from vertical else 200% 100%)
transition: background-position 2s ease;
background-position: top; (change this position to bottom to trigger the "transition"

not sure if this is what you were asking

1 Like