Trajectory for svg animation | Sololearn: Learn to code for FREE!
+ 6

Trajectory for svg animation

When we use svg animation we set from and to values. Can we add a moving trajectory? For it to be not lineral but, for example circle.

29th Mar 2019, 5:42 AM
Julia
6 Réponses
+ 5
Thank you! It is a nice idea. But I'd like to know if there is a chance to make something like analog watch using svg animation or to make a ball move by a Bezier curve. But it is also cool.
29th Mar 2019, 12:07 PM
Julia
+ 5
When I asked, I didn't know. And tried to make an analog watch. So I made there false animation. And then I found an answer.
2nd Apr 2019, 3:48 AM
Julia
+ 4
Can be any shape. To give you an idea: https://css-tricks.com/svg-line-animation-works/ For a circle, start with: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle Then animate as you see fit. I hope this helps! ūüôā
29th Mar 2019, 9:47 AM
Janning‚≠ź
Janning‚≠ź - avatar
+ 3
Yes, of course. SVG Path is very flexible. If you scroll down a little ways (or find in page "Bezier") you can get an idea of some of your options here: https://css-tricks.com/svg-path-syntax-illustrated-guide/
29th Mar 2019, 7:10 PM
Janning‚≠ź
Janning‚≠ź - avatar
+ 3
To make such kind of animation we should use animateMotion tag. The trajectory should be set in path tag. I performad this task in the code below. https://code.sololearn.com/WD246tH81xU0/?ref=app
1st Apr 2019, 11:59 AM
Julia
+ 2
ūü§Ē Sounds like you knew the answer to your own question. If so, why ask?
1st Apr 2019, 7:53 PM
Janning‚≠ź
Janning‚≠ź - avatar