Menu Home

animate

osbo.com | SVG | Elements | animate

The animate SVG element specifies animation of a single attribute or property over time.

Syntax

Attributes

accumulate

Specifies whether or not the animation is cumulative.

Value
none | sum
Default
none

additive

Specifies whether or not the animation is additive.

Value
replace | sum
Default
replace

attributeName

Specifies the name of the target property or attribute.

Value
<name>
Default
(none)

begin

Specifies when the element should begin.

Value
<begin-value-list>
Default
0s

by

Specifies a relative offset value for the animation.

This attribute is ignored if the values attribute is specified.

Value
<value>
Default
(none)

calcMode

Specifies the interpolation mode for the animation.

Value
discrete | linear | paced | spline
Default
linear

dur

Specifies the simple duration.

Value
<clock-value> | indefinite | media
Default
indefinite

end

Specifies an end value for the animation that can constrain the active duration.

Value
<end-value-list>
Default
(none)

fill

Specifies the animation effect when the animation is over.

Value
freeze | remove
Default
remove

from

Specifies the starting value of the animation.

This attribute is ignored if the values attribute is specified.

Value
<value>
Default
(none)

href

Specifies a Uniform Resource Locator (URL) reference to the element.

Value
<url>
Default
(none)

id

Specifies a unique identifier.

Value
<id>
Default
(none)

keySplines

Specifies a set of Bézier control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing.

This attribute is ignored unless the calcMode is set to spline.

Value
<control-point> [; <control-point>]* ;?
Default
(none)

keyTimes

Specifies a semicolon-separated list of time values used to control the pacing of the animation.

Each time in the list corresponds to a value in the values attribute list, and defines when the value is used in the animation function. Each time value in the keyTimes list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the simple duration of the animation element.

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

max

Specifies the maximum value of the active duration.

Value
<clock-value> | media
Default
(none)

min

Specifies the minimum value of the active duration.

Value
<clock-value> | media
Default
0s

onbegin

Specifies a script to run when an animation element begins.

Value
<script>
Default
(none)

onend

Specifies a script to run when an animation element ends.

Value
<script>
Default
(none)

onrepeat

Specifies a script to run when an animation element repeats.

Value
<script>
Default
(none)

repeatCount

Specifies the number of iterations of the animation function.

Value
indefinite | <number>
Default
(none)

repeatDur

Specifies the total duration for repeat.

Value
<clock-value> | indefinite
Default
(none)

requiredExtensions

Specifies a list of URL references which identify the required extensions, with the individual values separated by white space.

If all of the given extensions are supported by the user agent, the attribute evaluates to true. Otherwise, the current element and its children are skipped and will not be rendered.

Value
<set-of-space-separated-tokens>
Default
(none)

restart

Specifies whether or not the animation can restart.

Value
always | never | whenNotActive
Default
always

systemLanguage

Specifies a set of comma-separated tokens, each of which must be a Language-Tag value.

Value
<set-of-comma-separated-tokens>
Default
(none)

to

Specifies the ending value of the animation.

This attribute is ignored if the values attribute is specified.

Value
<value>
Default
(none)

values

Specifies a sequence of values to use over the course of the animation.

Value
<list>
Default
(none)

Examples

accumulate

none

sum

additive

replace

sum

attributeName

<name>

begin

<begin-value-list>

by

<value>

calcMode

discrete

linear

paced

spline

dur

<clock-value>

indefinite

media

end

<end-value-list>

fill

freeze

remove

from

<value>

href

<url>

id

<id>

keySplines

<control-point>

keyTimes

<number>

max

<clock-value>

media

min

<clock-value>

media

onbegin

<script>

onend

<script>

onrepeat

<script>

repeatCount

indefinite

<number>

repeatDur

<clock-value>

indefinite

requiredExtensions

<set-of-space-separated-tokens>

restart

always

never

whenNotActive

systemLanguage

<set-of-comma-separated-tokens>

to

<value>

values

<list>

Internal

animateMotion

animateTransform

discard

mpath

set

External

World Wide Web Consortium (W3C)