Menu Home

animateMotion

osbo.com | SVG | Elements | animateMotion

The animateMotion SVG element specifies a referenced element to move along a motion path.

Syntax

Attributes

calcMode

Specifies the interpolation mode for the animation.

Value
discrete | linear | paced | spline
Default
paced

keyPoints

Specifies how far along the path the object shall move at a moment in time.

It takes a semicolon-separated list of floating point values between 0 and 1. Each value corresponds to a value in the keyTimes attribute.

Value
<number> [; <number>]* ;?
Default
(none)

origin

Specifies the origin of motion for the animation.

It has no effect in SVG.

Value
default
Default
default

path

Specifies the motion path.

It is expressed in the same format and interpreted the same way as the d geometric property for the path element. The effect of a motion path animation is to add a supplemental transformation matrix onto the CTM for the referenced object which causes a translation along the x- and y-axes of the current user coordinate system by the computed X and Y values computed over time.

Value
<path-data>
Default
(none)

rotate

Specifies the rotation of an object as it travels along a motion path.

Value
auto | auto-reverse | <number>
Default
0

Examples

calcMode

discrete

linear

paced

spline

keyPoints

<number>

origin

default

path

<path-data>

rotate

auto

auto-reverse

<number>

Internal

animate

animateTransform

discard

mpath

set

External

World Wide Web Consortium (W3C)