How can we animate svg position and color?

Question

Svg(2 or more animations on one element)?

Answer 1

Hello Black Tigress. There are a number of ways in which you can animate SVG elements. I am not sure if the following examples will be of help to you but might, at least, give you some ideas. Please see

SVG Colour animation - https://code.sololearn.com/W8ujE7Tn9CZN/?ref=app

SVG A first SMIL animation - https://code.sololearn.com/W5x0toIeWVvy/?ref=app

SVG linear motion demo - https://code.sololearn.com/W5LipU2u5QRN/?ref=app

If you find these of interest you could try a search for SVG in my codes where you will find other examples. Best wishes.

Answer 2

If your svg is made of different components you can use CSS and it's background-color attribute for CSS animations and for position you can manipulate the top and right attributes, after setting position to be fixed or relative or absolute.

Answer 3

https://theartificial.com/blog/2018/05/23/svg-animation.html