<animateMotion>

The SVG <animateMotion> element let define how an element moves along a motion path.

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

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

Usage context

Attributes

keyPoints

This attribute indicate, in the range [0,1], how far is the object along the path for each keyTimes associated values.
Value type: <number>*; Default value: none; Animatable: no

path

This attribute defines the path of the motion, using the same syntax as the d attribute.
Value type: <string>; Default value: none; Animatable: no

rotate

This attribute defines a rotation applied to the elment 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

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

Global attributes

Core Attributes

Most notably: id

Styling Attributes

class, style

Event Attributes

Global event attributes, Document element event attributes

Usage notes

This element implements the SVGAnimateMotionElement interface.

Specifications

Browser compatibility

See also

• <mpath>