animate

• Description
• Syntax
• Examples
• Links

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

Specifies whether or not the animation is cumulative.

none | sum

none

Specifies whether or not the animation is additive.

replace | sum

replace

Specifies the name of the target property or attribute.

<name>

(none)

Specifies when the element should begin.

<begin-value-list>

0s

Specifies a relative offset value for the animation.

This attribute is ignored if the values attribute is specified.

<value>

(none)

Specifies the interpolation mode for the animation.

discrete | linear | paced | spline

linear

Specifies the simple duration.

<clock-value> | indefinite | media

indefinite

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

<end-value-list>

(none)

Specifies the animation effect when the animation is over.

freeze | remove

remove

Specifies the starting value of the animation.

This attribute is ignored if the values attribute is specified.

<value>

(none)

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

<url>

(none)

Specifies a unique identifier.

<id>

(none)

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.

<control-point> [; <control-point>]* ;?

(none)

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.

<number> [; <number>]* ;?

(none)

Specifies the maximum value of the active duration.

<clock-value> | media

(none)

Specifies the minimum value of the active duration.

<clock-value> | media

0s

Specifies a script to run when an animation element begins.

<script>

(none)

Specifies a script to run when an animation element ends.

<script>

(none)

Specifies a script to run when an animation element repeats.

<script>

(none)

Specifies the number of iterations of the animation function.

indefinite | <number>

(none)

Specifies the total duration for repeat.

<clock-value> | indefinite

(none)

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.

<set-of-space-separated-tokens>

(none)

Specifies whether or not the animation can restart.

always | never | whenNotActive

always

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

<set-of-comma-separated-tokens>

(none)

Specifies whether an element is focusable, whether it is reachable using sequential focus navigation, and the relative order of the element for the purposes of sequential focus navigation.

<valid-integer>

(none)

Specifies the ending value of the animation.

This attribute is ignored if the values attribute is specified.

<value>

(none)

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

<list>

(none)

animateMotion

animateTransform

discard

mpath

set

World Wide Web Consortium (W3C)