SVG animateMotion along circle instead on path

user_11204494 0
Viewed 52

Is there a way to make an object move, not along the path, but along a circle? For example:

<animateMotion path="M 0,0 C -50,100 -150,100 -200,0" begin="2s" dur="3s" fill="freeze" />

This works because we added a path.

Is there a way to do it where you can replace a path with a circle (in this example), or with any other object?

<animateMotion
<circle cx="865.9" cy="539.6" r="499.1"/>
begin="2s" dur="3s" fill="freeze" />

Also, only using SVG, no HTML (need to send a project as .SVG file)

adobe-illustrator animation svg xml
1 Answers

You can write a circle as a path. For example this circle

 <circle cx="865.9" cy="539.6" r="499.1" />

can be written like a path using the arc (A) command like so:

  <path d="M1365,539.6
           A499.1,499.1 0 1 1 366.8,539.6 
           A499.1,499.1 0 1 1 1365,539.6" />

you can use the d atribute of this path for the animation:

svg{width:100vh; border:solid}
<svg viewBox="250 0 1300 1100">
  <path d="M25,-25v50h-50v-50z">
    <animateMotion path="M1365,539.6A499.1,499.1 0 1 1 366.8,539.6 A499.1,499.1 0 1 1 1365,539.6" begin="2s" dur="3s" fill="freeze" /> 
  </path>
 
 
  <circle cx="865.9" cy="539.6" r="499.1" fill="none" stroke="black"/>
  

</svg>

user_78973950
Related