Animate circle with gradient: not rendering correctly

[Clms 2 Likes (Newbie)]

Hi,

 

I applied a gradient two an SVG. The gradient stretches over two circles.

When I move one circle manually (change the position of the circle-element within the SVG), the gradient works fine (a different part of the gradient is sown on the circle). But as soon as I animate the circle, the gradient on the circle stays the same - it seems like the gradient is only rendered in the beginning.

 

How can I make it work, that when the circle moves, the gradient on the circle changes accordingly?

 

Thanks a lot!

See the Pen ePadmg by clmsvie (@clmsvie) on CodePen

[Sahil 2,541 Likes (Superhero)]

It will work if you animate cx attribute.

 

See the Pen RemgqJ by Sahil89 (@Sahil89) on CodePen

 

[Clms 2 Likes (Newbie)]

Oh, great!

Thanks a lot