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)
CodePudding user response:
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>