0

How do I have an animated object follow a path in html

I’m just getting back into coding (and I’m horrible at it but practice makes mediocre) and I’m having trouble figuring out how to make an object like an svg square follow an animation path like as if it were to move across the screen and changing direction at three points https://code.sololearn.com/WpIgQKYtnARY/?ref=app

27th Sep 2018, 12:38 AM
Lily
Lily - avatar
1 Réponse
0
Use animateMotion inside rect tag to set animation to follow a outside path tag <svg width="1000" height="500"> <path id="path1" d="M 0 0 L200 200 L200 0 Z" style="stroke:#eee; fill:none;" /> <rect width="100" height="100" fill="pink"> <animateMotion dur="10s" repeatCount="indefinite"> <mpath xlink:href="#path1"/> </animateMotion> </rect> </svg> https://code.sololearn.com/WRVoPINU8Siu/?ref=app
27th Sep 2018, 2:54 AM
Calviղ
Calviղ - avatar