HOW DO I PUT SVG ANIMATION TO A PATH ATTRIBUTE

Question

I was making a shape using path attribute and i want to put animation to it. I have checked the comment section, all the examples that i have seen, there is no one that put his animation on path. They are all using shapes especially rect, and so on. Even in the lesson, i did not see any example showing how to animate a path.

Answer 1

If you're referring to animateMotion being within a path element, I don't think that's allowed.

You can use defs and clipPath to animate clipping paths.

You can animate a path using CSS to control the stroke style like described here: https://css-tricks.com/svg-line-animation-works/

You could animate using CSS to control scale, rotation... of a path if it was within a g element.

JavaScript gets complicated but it is powerful enough to express every kind of animation for a path you could dream of. JavaScript may be your only option if you want to control the path's coordinates in a special way that isn't possible with transforms. I would avoid it if I could think of another way with CSS or an animateMotion element, though.