How to set the path for a moving Html element

Question

I have been designing a web animation in which a 2d car moves on a road. For now the car can only move horizontally in a straight line, is there any way to creat an SVG path for the car so it corresponds to all the bumps and depressions of the road while moving. Any code bit references would be really helpful.

Answer 1

In the animation you have to change the x and y at the same time.

Answer 2

JaScript thank you for answering, I did think of doing that but I wanted to know if there was an easier way of carrying it out like automatically setting the svg line as a path for the car. If you have any ideas please let me know

Answer 3

you could animate any svg element along a path by using <animateMotion> tag:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion