The SVG <animateMotion>
element let 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.
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
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 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
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
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
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of '<animateMotion>' in that specification. |
Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<animateMotion>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animateMotion | Chrome Full support Yes | Edge Full support ≤79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
calcMode | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
keyPoints | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
origin | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
path | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
rotate | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown