<animateMotion>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The<animateMotion>SVG element provides a way to define how an element moves along a motion path.

Note:To reuse an existing path, it will be necessary to use an<mpath> element inside the<animateMotion> element instead of thepath attribute.

Usage context

Categories	Animation element
Permitted content	Any number of the following elements, in any order: Descriptive elements `<mpath>`

Attributes

keyPoints: This attribute indicate, in the range [0,1], how far is the object along the path for eachkeyTimes associated values.Value type:<number>*;Default value: none;Animatable:no
path: This attribute defines the path of the motion, using the same syntax as thed attribute.Value type:<string>;Default value: none;Animatable:no
rotate: This attribute defines a rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation.Value type:<number> |auto |auto-reverse;Default value:0;Animatable:no

Note:For<animateMotion>, the default value for thecalcMode attribute ispaced.

Animation Attributes

Animation timing attributes: begin,dur,end,min,max,restart,repeatCount,repeatDur,fill
Animation value attributes: calcMode,values,keyTimes,keySplines,from,to,by
Other Animation attributes: Most notably:attributeName,additive,accumulate
Animation event attributes: Most notably:onbegin,onend,onrepeat

DOM Interface

This element implements theSVGAnimateMotionElement interface.

Example

html,body,svg {  height: 100%;  margin: 0;  padding: 0;  display: block;}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">  <path    fill="none"    stroke="lightgrey"    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />  <circle r="5" fill="red">    <animateMotion      dur="10s"      repeatCount="indefinite"      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />  </circle></svg>