W3cubDocs

/SVG

<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 the path 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 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 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 the calcMode attribute is paced.

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 the SVGAnimateMotionElement interface.

Example

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

Specifications

Specification
SVG Animations Level 2> # AnimateMotionElement>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`animateMotion`	19	79	4	≤12.1	6	25	4	≤12.1	6	1.5	4.4	6
`calcMode`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`fill`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`href`	50	79	51	37	12.1	50	51	37	12.2	5.0	50	12.2
`keyPoints`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`origin`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`path`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`rotate`	19	79	4	15	6	25	4	14	6	1.5	4.4	6
`systemLanguage`	19	79	12	≤12.1	6	25	14	≤12.1	6	1.5	4.4	6