Search code examples
xmlanimationsvgadobe-illustrator

SVG animateMotion along circle instead on path


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)


Solution

  • 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>