<animateMotion>
<animate>
<animatecolor>
<animatemotion>
<animatetransform>
<discard>
<mpath>
<set>
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
The SVG <animateMotion>
element provides a way to define how an element moves along a motion path.
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>
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
Global attributes
- Core Attributes
-
Most notably:
id
- Styling Attributes
class
,style
- Event Attributes
Usage notes
This element implements the SVGAnimateMotionElement
interface.
Specifications
Specification |
---|
SVG Animations Level 2 # AnimateMotionElement |
Browser compatibility
BCD tables only load in the browser