firstDaisy Diff compare report.
Click on the changed parts for a detailed description. Use the left and right arrow keys to walk through the modifications.		 last 

previous   next   contents   elements   attributes   properties   index  

14 January 2003

SVG 1.1 (Second Edition) – 16 May 2009

19 Animation

Contents

  19.

19.1 Introduction

Because the Web is a dynamic medium, SVG supports the ability to change vector graphics over time. SVG content can be animated in the following ways:

19.2 Animation elements

19.2.1 Overview

SVG's animation elements were developed in collaboration with the W3C Synchronized Multimedia (SYMM) Working Group, developers of the Synchronized Multimedia Integration Language (SMIL) 1.0 Specification [SMIL1].

The SYMM Working Group, in collaboration with the SVG Working Group, has authored the SMIL Animation specification [SMILANIM], which represents a general-purpose XML animation feature set. SVG incorporates the animation features defined in the SMIL Animation specification and provides some SVG-specific extensions.

For an introduction to the approach and features available in any language that supports SMIL Animation, see SMIL Animation overview and SMIL Animation animation model ([SMILANIM], sections 2 and 3). For the list of animation features which go beyond SMIL Animation, see SVG extensions to SMIL Animation.

19.2.2 Relationship to SMIL Animation

SVG is a host language in terms of SMIL Animation and therefore introduces additional constraints and features as permitted by that specification. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for SVG's animation elements and attributes is the SMIL Animation specification [SMILANIM] specification.

SVG supports the following four animation elements which are defined in the SMIL Animation specification:

  
'animate'
  
allows scalar attributes and properties to be assigned different values over time
  
'set'
  
a convenient shorthand for 'animate', which is useful for assigning animation values to non-numeric attributes and properties, such as the 'visibility' property
  
'animateMotion'
        
moves an element along a motion path
  
'animateColor'
  
modifies the color value of particular attributes or properties over time

Additionally, SVG includes the following compatible extensions to SMIL Animation:

  
'animateTransform'
  
modifies one of SVG's transformation attributes over time, such as the 'transform' attribute
  
'path' attribute
  
SVG allows any feature from SVG's path data syntax to be specified in a 'path' attribute to the 'animateMotion' element (SMIL Animation only allows a subset of SVG's path data syntax within a 'path' attribute)
  
'mpath' element
  
SVG allows an 'animateMotion' element to contain a child 'mpath' element which references an SVG 'path' element as the definition of the motion path
  
'keyPoints' attribute
  
SVG adds a 'keyPoints' attribute to the 'animateMotion' to provide precise control of the velocity of motion path animations
  
'rotate' attribute
  
SVG adds a 'rotate' attribute to the 'animateMotion' to control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path

For compatibility with other aspects of the language, SVG uses URI references via an 'xlink:href' attribute to identify the elements which are to be targets of the animations.

SMIL Animation requires that the host language define the meaning for document begin and the document end. Since an 'svg' is sometimes the root of the XML document tree and other times can be a component of a parent XML grammar, the document begin for a given SVG document fragment is defined to be the exact time at which the 'svg' element's SVGLoad SVGLoad event is triggered. The document end of an SVG document fragment is the point at which the document fragment has been released and is no longer being processed by the user agent. However, nested 'svg' elements within an SVG document do not constitute document fragments in this sense, and do not define a separate document begin; all times within the nested SVG fragment are relative to the document time defined for the root 'svg' element.

For SVG, the term presentation time indicates the position in the timeline relative to the document begin of a given document fragment.

SVG defines more constrained error processing than is defined in the SMIL Animation specification [SMILANIM] specification. SMIL Animation defines error processing behavior where the document continues to run in certain error situations, whereas all animations within an SVG document fragment will stop in the event of any error within the document (see Error processing).

19.2.3 Animation elements example

Example anim01 below demonstrates each of SVG's five animation elements. 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm"  viewBox="0 0 800 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example anim01 - demonstrate animation elements</desc>
  <rect x="1" y="1" width="798" height="298" 
        fill="none" stroke="blue" stroke-width="2" />
  <!-- The following illustrates the use of the 'animate' element
        to animate a rectangles x, y, and width attributes so that
        the rectangle grows to ultimately fill the viewport. -->
  <rect id="RectElement" x="300" y="100" width="300" height="100"
        fill="rgb(255,255,0)"  >
    <animate attributeName="x" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="300" to="0" />
    <animate attributeName="y" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="100" to="0" />
    <animate attributeName="width" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="300" to="800" />
    <animate attributeName="height" attributeType="XML"
             begin="0s" dur="9s" fill="freeze" from="100" to="300" />
  </rect>
  <!-- Set up a new user coordinate system so that
        the text string's origin is at (0,0), allowing
        rotation and scale relative to the new origin -->
  <g transform="translate(100,100)" >
    <!-- The following illustrates the use of the 'set', 'animateMotion',
         'animateColor' and 'animateTransform' elements. The 'text' element 
         below starts off hidden (i.e., invisible). At 3 seconds, it:
           * becomes visible
           * continuously moves diagonally across the viewport
           * changes color from blue to dark red
           * rotates from -30 to zero degrees
           * scales by a factor of three. -->
    <text id="TextElement" x="0" y="0"
          font-family="Verdana" font-size="35.27" visibility="hidden"  > 
      It's alive!
      <set attributeName="visibility" attributeType="CSS" to="visible"
           begin="3s" dur="6s" fill="freeze" />
      <animateMotion path="M 0 0 L 100 100" 
           begin="3s" dur="6s" fill="freeze" />
      <animateColor attributeName="fill" attributeType="CSS"
           from="rgb(0,0,255)" to="rgb(128,0,0)"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" attributeType="XML"
           type="rotate" from="-30" to="0"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" attributeType="XML"
           type="scale" from="1" to="3" additive="sum"
           begin="3s" dur="6s" fill="freeze" />
    </text>
  </g>
</svg>
Example anim01
Example anim01 - at zero seconds At zero seconds Example anim01 - at three seconds At three seconds
Example anim01 - at six seconds At six seconds Example anim01 - at nine seconds At nine seconds

View this example as SVG (SVG-enabled browsers only)

The sections below describe the various animation attributes and elements.

 

19.2.4 Attributes to identify the target element for an animation

The following attributes are attribute is common to all animation elements and identify identifies the target element for the animation.


<!ENTITY % SVG.Animation.attrib
    "%SVG.XLink.attrib;
     %SVG.Animation.extra.attrib;"
>

Attribute definitions:

xlink:href = "<uri>"

A URI reference to the element which is the target of this animation and which therefore will be modified over time.

The target element must be part of the current SVG document fragment.

<uri> must point to exactly one target element which is capable of being the target of the given animation. If <uri> points to multiple target elements, if the given target element is not capable of being a target of the given animation, or if the given target element is not part of the current SVG document fragment, then the document is in error (see Error processing).

If the 'xlink:href' attribute is not provided, then the target element will be the immediate parent element of the current animation element.

Refer to the descriptions of the individual animation elements for any restrictions on what types of elements can be targets of particular types of animations.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: Specifying the animation target ([SMILANIM], section 3.1).

19.2.5 Attributes to identify the target attribute or property for an animation

The following attributes identify the target attribute or property for the given target element whose value changes over time.


<!ENTITY % SVG.AnimationAttribute.attrib
    "attributeName  CDATA  #REQUIRED
     attributeType  CDATA  #IMPLIED
     %SVG.AnimationAttribute.extra.attrib;"
>

Attribute definitions:

attributeName = "<attributeName>"

Specifies the name of the target attribute. An XMLNS prefix may be used to indicate the XML namespace for the attribute. The prefix will be interpreted in the scope of the current (i.e., the referencing) animation element.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: Specifying the animation target ([SMILANIM], section 3.1).

attributeType = "CSS | XML | auto"

Specifies the namespace in which the target attribute and its associated values are defined. The attribute value is one of the following (values are case-sensitive):

"CSS"
This specifies that the value of "'attributeName" ' is the name of a CSS property defined as animatable in this specification.
"XML"
This specifies that the value of "'attributeName" ' is the name of an XML attribute defined in the default XML namespace for the target element. If the value for 'attributeName' has an XMLNS prefix, the implementation must use the associated namespace as defined in the scope of the target element. The attribute must be defined as animatable in this specification.
"auto"
The implementation should match the 'attributeName' to an attribute for the target element. The implementation must first search through the list of CSS properties for a matching property name, and if none is found, search the default XML namespace for the element.

The default value is

"

'auto

"

'.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: Specifying the animation target ([SMILANIM], section 3.1).

19.2.6 Attributes to control the timing of the animation

The following attributes are common to all animation elements and control the timing of the animation, including what causes the animation to start and end, whether the animation runs repeatedly, and whether to retain the end state the animation once the animation ends.


<!ENTITY % SVG.AnimationTiming.attrib
    "begin CDATA #IMPLIED
     dur CDATA #IMPLIED
     end CDATA #IMPLIED
     min CDATA #IMPLIED
     max CDATA #IMPLIED
     restart ( always | never | whenNotActive ) 'always'
     repeatCount CDATA #IMPLIED
     repeatDur CDATA #IMPLIED
     fill ( remove | freeze ) 'remove'
     %SVG.AnimationTiming.extra.attrib;"
>

In the syntax specifications that follow, optional white space is indicated as "S", defined as follows: 

S ::= (#x20 | #x9 | #xD | #xA)*

Attribute definitions:

begin
:
= "begin-value-list"

Defines when the element should begin (i.e. become active).

The attribute value is a semicolon separated list of values.

begin-value-list ::= begin-value (S? ";" S? begin-value-list )?
A semicolon separated list of begin values. The interpretation of a list of begin times is detailed in SMIL Animation's section on "Evaluation of begin and end time lists".
 
begin-value ::= ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | wallclock-sync-value | "indefinite" )
Describes the element begin.
 
offset-value ::= ( S? "+" | "-" S? )? ( Clock-value )
For SMIL Animation, this describes the element begin as an offset from an implicit syncbase. For SVG, the implicit syncbase begin is defined to be relative to the document begin. Negative begin times are entirely valid and easy to compute, as long as there is a resolved document begin time.
syncbase-value ::= ( Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? Clock-value )?
Describes a syncbase and an optional offset from that syncbase. The element begin is defined relative to the begin or active end of another animation. A syncbase consists of an ID reference to another animation element followed by either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element.
event-value ::= ( Id-value "." )? ( event-ref ) ( S? ("+"|"-") S? Clock-value )?
Describes an event and an optional offset that determine the element begin. The animation begin is defined relative to the time that the event is raised. The list of event-symbols available for a given event-base element is the list of event attributes available for the given element as defined by the SVG DTD, with the one difference that the leading 'on' is removed from the event name (i.e., the animation event name is 'click', not 'onclick'). A list of all events supported by SVG can be found in Complete list of supported events. Details of event-based timing are described in SMIL Animation: Unifying Event-based and Scheduled Timing.
repeat-value ::= ( Id-value "." )? "repeat(" integer ")" ( S? ("+"|"-") S? Clock-value )?
Describes a qualified repeat event. The element begin is defined relative to the time that the repeat event is raised with the specified iteration value.
accessKey-value ::= "accessKey(" character ")" ( S? ("+"|"-") S? Clock-value )?
Describes an accessKey that determines the element begin. The element begin is defined relative to the time that the accessKey character is input by the user.
"
wallclock-sync-value ::= "wallclock(" wallclock-value ")"
Describes the element begin as a real-world clock time. The wallclock time syntax is based upon syntax defined in Representation of dates and times [ISO8601].
"indefinite"

The begin of the animation will be determined by a "beginElement()" method call or a hyperlink targeted to the element.

The animation DOM methods are described in DOM interfaces.

Hyperlink-based timing is described in SMIL Animation: Hyperlinks and timing.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'begin' attribute

.
 
dur :

([SMILANIM], section 3.2.1).

dur = Clock-value | "media" | "indefinite"

Specifies the simple duration.

The attribute value can be

either

one of the following:

Clock-value
Specifies the length of the simple duration in presentation time. Value must be greater than 0.
"media"
Specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media.
(For SVG's animation elements, if "media" is specified, the attribute will be ignored.)
"indefinite"
Specifies the simple duration as indefinite.

If the animation does not have a 'dur' attribute, the simple duration is indefinite. Note that interpolation will not work if the simple duration is indefinite (although this may still be useful for 'set' elements). Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'dur' attribute ([SMILANIM], section 3.

end :

2.1).

end = "end-value-list"

Defines an end value for the animation that can constrain the active duration. The attribute value is a semicolon separated list of values.

end-value-list ::= end-value (S? ";" S? end-value-list )?
A semicolon separated list of end values. The interpretation of a list of end times is detailed below.
end-value ::= ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | wallclock-sync-value | "indefinite" )
Describes the active end of the animation.

A value of

"

'indefinite

"

' specifies that the end of the animation will be determined by

a "

an endElement

()"

method call (the animation DOM methods are described in DOM interfaces).

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see

description of

SMIL Animation: 'end' attribute ([SMILANIM], section 3.3.2).

min
:
= Clock-value | "media"

Specifies the minimum value of the active duration.

The attribute value can be either of the following:

Clock-value

Specifies the length of the minimum value of the active duration, measured in local time.

Value must be greater than 0.

"media"
Specifies the minimum value of the active duration as the intrinsic media duration. This is only valid for elements that define media. (For SVG's animation elements, if
"
'media
"
' is specified, the attribute will be ignored.)

The default value for 'min' is

"

'0

"

'. This does not constrain the active duration at all.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'min' attribute ([SMILANIM], section 3.3.3).

max
:
= Clock-value | "media"

Specifies the maximum value of the active duration.

The attribute value can be either of the following:

Clock-value

Specifies the length of the maximum value of the active duration, measured in local time.

Value must be greater than 0.

"media"
Specifies the maximum value of the active duration as the intrinsic media duration. This is only valid for elements that define media. (For SVG's animation elements, if
"
'media
"
' is specified, the attribute will be ignored.)

There is no default value for 'max'. This does not constrain the active duration at all.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'max' attribute ([SMILANIM], section 3.3.3).

restart
:
= "always" | "whenNotActive" | "never"
always
The animation can be restarted at any time. 
This is the default value.
whenNotActive
The animation can only be restarted when it is not active (i.e. after the active end). Attempts to restart the animation during its active duration are ignored.
never
The element cannot be restarted for the remainder of the current simple duration of the parent time container. (In the case of SVG, since the parent time container is the SVG document fragment, then the animation cannot be restarted for the remainder of the document duration.)

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'restart' attribute ([SMILANIM], section 3.3.7).

repeatCount
:
= numeric value | "indefinite"

Specifies the number of iterations of the animation function. It can have the following attribute values:

numeric value
This is a (base 10) "floating point" numeric value that specifies the number of iterations. It can include partial iterations expressed as fraction values. A fractional value describes a portion of the simple duration. Values must be greater than 0.
"indefinite"
The animation is defined to repeat indefinitely (i.e. until the document ends).

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'repeatCount' attribute ([SMILANIM], section 3.3.1).

repeatDur
:
= Clock-value | "indefinite"

Specifies the total duration for repeat. It can have the following attribute values:

Clock-value
Specifies the duration in presentation time to repeat the animation function f(t).
"indefinite"
The animation is defined to repeat indefinitely (i.e. until the document ends).

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'repeatDur' attribute ([SMILANIM], section 3.3.1).

fill
:
= "freeze" | "remove"

This attribute can have the following values:

freeze
The animation effect F(t) is defined to freeze the effect value at the last value of the active duration. The animation effect is "frozen" for the remainder of the document duration (or until the animation is restarted - see SMIL Animation: Restarting animation).
remove

The animation effect is removed (no longer applied) when the active duration of the animation is over. After the active end of the animation, the animation no longer affects the target (unless the animation is restarted - see SMIL Animation: Restarting animation).

This is the default value.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'fill' attribute ([SMILANIM], section 3.3.5).

The SMIL Animation specification [SMILANIM] specification defines the detailed processing rules associated with the above attributes. Except for any SVG-specific rules explicitly mentioned in this specification, the SMIL Animation [ SMILANIM] specification is the normative definition of the processing rules for the above attributes.

19.2.6.1 Clock values

Clock values have the same syntax as in SMIL Animation specification [SMILANIM], which . The grammar for clock values is repeated here:

Clock-val         ::= Full-clock-val | Partial-clock-val 
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]

For Timecount values, the default metric suffix is "s" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.

Clock values describe presentation time.

The following are examples of legal clock values:

Fractional values are just (base 10) floating point definitions of seconds. Thus:

00.5s = 500 milliseconds
00:00.005 = 5 milliseconds

19.2.7 Attributes that define animation values over time

The following attributes are common to elements 'animate', 'animateMotion', 'animateColor' and 'animateTransform'. These attributes define the values that are assigned to the target attribute or property over time. The attributes below provide control over the relative timing of keyframes and the interpolation method between discrete values.


<!ENTITY % SVG.AnimationValue.attrib
    "calcMode ( discrete | linear | paced | spline ) 'linear'
     values CDATA #IMPLIED
     keyTimes CDATA #IMPLIED
     keySplines CDATA #IMPLIED
     from CDATA #IMPLIED
     to CDATA #IMPLIED
     by CDATA #IMPLIED
     %SVG.AnimationValue.extra.attrib;"
>

Attribute definitions:

calcMode = "discrete | linear | paced | spline"

Specifies the interpolation mode for the animation. This can take any of the following values. The default mode is

"

'linear

"

', however if the attribute does not support linear interpolation (e.g. for strings), the 'calcMode' attribute is ignored and discrete interpolation is used.

discrete
This specifies that the animation function will jump from one value to the next without any interpolation.
linear
Simple linear interpolation between values is used to calculate the animation function. Except for 'animateMotion', this is the default 'calcMode'.
paced
Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If
"
'paced
"
' is specified, any 'keyTimes' or 'keySplines' will be ignored. For 'animateMotion', this is the default 'calcMode'.
spline
Interpolates from one value in the 'values' list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the 'keyTimes' attribute, and the control points for each interval are defined in the 'keySplines' attribute.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'calcMode' attribute ([SMILANIM], section 3.2.3).

values = "<list>"
A semicolon-separated list of one or more values. Vector-valued attributes are supported using the vector syntax of the 'attributeType' domain. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation
[ SMILANIM]
specification. In particular, see SMIL Animation: 'values' attribute ([SMILANIM], section 3.2.2).
keyTimes = "<list>"

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.

  

If a list of 'keyTimes' is specified, there must be exactly as many values in the 'keyTimes' list as in the 'values' list.

 

Each successive time value must be greater than or equal to the preceding time value.

 

The 'keyTimes' list semantics depends upon the interpolation mode:

  • For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The
keyTime
  • key time associated with each value defines when the value is set; values are interpolated between the
keyTimes
  • key times.
  • For discrete animation, the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in 'keyTimes'.

If the interpolation mode is

"

'paced

"

', the 'keyTimes' attribute is ignored.

If there are any errors in the 'keyTimes' specification (bad values, too many or too few values), the document fragment is in error (see error processing).

If the simple duration is indefinite, any 'keyTimes' specification will be ignored.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'keyTimes' attribute ([SMILANIM], section 3.2.3).

keySplines = "<list>"

A set of Bézier control points associated with the 'keyTimes' list, defining a cubic Bézier function that controls interval pacing. The attribute value is a semicolon separated list of control point descriptions. Each control point description is a set of four values: x1 y1 x2 y2, describing the Bézier control points for one time segment. The 'keyTimes' values that define the associated segment are the Bézier "anchor points", and the 'keySplines' values are the control points. Thus, there must be one fewer sets of control points than there are 'keyTimes'.

 

The values must all be in the range 0 to 1.

This attribute is ignored unless the 'calcMode' is set to

"

'spline

"

'.

If there are any errors in the 'keySplines' specification (bad values, too many or too few values), the document fragment is in error (see error processing).

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'keySplines' attribute ([SMILANIM], section 3.2.3).

from = "<value>"
Specifies the starting value of the animation.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation
[ SMILANIM]
specification. In particular, see SMIL Animation: 'from' attribute ([SMILANIM], section 3.2.2).
to = "<value>"
Specifies the ending value of the animation.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation
[ SMILANIM]
specification. In particular, see SMIL Animation: 'to' attribute ([SMILANIM], section 3.2.2).
by = "<value>"
Specifies a relative offset value for the animation.
Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation
[ SMILANIM]
specification. In particular, see SMIL Animation: 'by' attribute ([SMILANIM], section 3.2.2).

The SMIL Animation specification [SMILANIM] specification defines the detailed processing rules associated with the above attributes. Except for any SVG-specific rules explicitly mentioned in this specification, the SMIL Animation [ SMILANIM] specification is the normative definition of the processing rules for the above attributes.

The animation values specified in the animation element must be legal values for the specified attribute. Leading and trailing white space, and white space before and after semicolon separators, will be ignored.

All values specified must be legal values for the specified attribute (as defined in the associated namespace). If any values are not legal, the document fragment is in error (see error processing).

If a list of values is used, the animation will apply the values in order over the course of the animation. If a list of 'values' is specified, any 'from', 'to' and 'by' attribute values are ignored.

The processing rules for the variants of from/by/to animations are described in Animation function values.

The following figure illustrates the interpretation of the 'keySplines' attribute. Each diagram illustrates the effect of 'keySplines' settings for a single interval (i.e. between the associated pairs of values in the 'keyTimes' and 'values' lists.). The horizontal axis can be thought of as the input value for the unit progress of interpolation within the interval - i.e. the pace with which interpolation proceeds along the given interval. The vertical axis is the resulting value for the unit progress, yielded by the keySplines functionfunction that the 'keySplines' attribute defines. Another way of describing this is that the horizontal axis is the input unit time for the interval, and the vertical axis is the output unit time. See also the section Timing and real-world clock times.

Examples of keySplines
 Example keySplines01 - keySplines of 0 0 1 1 (the default) keySplines="0 0 1 1" (the default) Example keySplines01 - keySplines of .5 0 .5 1 keySplines=".5 0 .5 1"
 
 Example keySplines01 - keySplines of 0 .75 .25 1 keySplines="0 .75 .25 1" Example keySplines01 - keySplines of 1 0 .25 .25 keySplines="1 0 .25 .25"

To illustrate the calculations, consider the simple example:

<animate dur="4s" values="10; 20" keyTimes="0; 1"
     calcMode="spline" keySplines={as in table} />

Using the 'keySplines' values for each of the four cases above, the approximate interpolated values as the animation proceeds are:

Value of 'keySplines
values 
'Initial valueAfter 1sAfter 2sAfter 3sFinal value
0 0 1 110.012.515.017.520.0
.5 0 .5 110.011.015.019.020.0
0 .75 .25 110.018.019.319.820.0
1 0 .25 .2510.010.110.616.920.0

For a formal definition of Bézier spline calculation, see [FOLEY-VANDAM], pp. 488-491.

19.2.8 Attributes that control whether animations are additive

It is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values. A simple "grow" animation can increase the width of an object by 10 pixels:

<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum"/>
</rect>

It is frequently useful for repeated animations to build upon the previous results, accumulating with each interation. The following example causes the rectangle to continue to grow with each repeat of the animation:

<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum" accumulate="sum" repeatCount="5"/>
</rect>

At the end of the first repetition, the rectangle has a width of 30 pixels. At the end of the second repetition, the rectangle has a width of 40 pixels. At the end of the fifth repetition, the rectangle has a width of 70 pixels.

For more information about additive animations, see SMIL Animation: Additive animation. For more information on cumulative animations, see SMIL Animation: Controlling behavior of repeating animation - Cumulative animation.

The following attributes are common to elements 'animate', 'animateMotion', 'animateColor' and 'animateTransform'.


<!ENTITY % SVG.AnimationAddtion.attrib
    "additive ( replace | sum ) 'replace'
     accumulate ( none | sum ) 'none'
     %SVG.AnimationAddtion.extra.attrib;"
>

Attribute definitions:

additive = "replace | sum"

Controls whether or not the animation is additive.

 
sum
Specifies that the animation will add to the underlying value of the attribute and other lower priority animations.
replace
Specifies that the animation will override the underlying value of the attribute and other lower priority animations. This is the default, however the behavior is also affected by the animation value attributes 'by' and 'to', as described in SMIL Animation: How from, to and by attributes affect additive behavior.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'additive' attribute ([SMILANIM], section 3.3.6).

accumulate = "none | sum"

Controls whether or not the animation is cumulative.

 
sum
Specifies that each repeat iteration after the first builds upon the last value of the previous iteration.
none
Specifies that repeat iterations are not cumulative. This is the default.

This attribute is ignored if the target attribute value does not support addition, or if the animation element does not repeat.

Cumulative animation is not defined for "to animation".

This attribute will be ignored if the animation function is specified with only the 'to' attribute.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation

[ SMILANIM]

specification. In particular, see SMIL Animation: 'accumulate' attribute ([SMILANIM], section 3.3.1).

19.2.9 Inheritance

SVG allows both attributes and properties to be animated. If a given attribute or property is inheritable by descendants, then animations on a parent element such as a 'g' element has the effect of propagating the attribute or property animation values to descendant elements as the animation proceeds; thus, descendant elements can inherit animated attributes and properties from their ancestors.

19.2.10 The 'animate' element

The 'animate' element is used to animate a single attribute or property over time. For example, to make a rectangle repeatedly fade away over 5 seconds, you can specify:

<rect>
  <animate attributeType="CSS" attributeName="opacity" 
         from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the SMIL Animation [ SMILANIM] specification. In particular, see SMIL Animation: 'animate' element. 


<!ENTITY % SVG.animate.extra.content "" >
<!ENTITY % SVG.animate.element "INCLUDE" >
<![%SVG.animate.element;[
<!ENTITY % SVG.animate.content
    "( %SVG.Description.class; %SVG.animate.extra.content; )\
*"
>
<!ELEMENT %SVG.animate.qname; %SVG.animate.content; >
<!-- end of SVG.animate.element -->]]>
<!ENTITY % SVG.animate.attlist "INCLUDE" >
<![%SVG.animate.attlist;[
<!ATTLIST %SVG.animate.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.AnimationEvents.attrib;
    %SVG.External.attrib;
    %SVG.Animation.attrib;
    %SVG.AnimationAttribute.attrib;
    %SVG.AnimationTiming.attrib;
    %SVG.AnimationValue.attrib;
    %SVG.AnimationAddtion.attrib;
>

([SMILANIM], section 4.1).

'animate'
Categories:
Animation element
Content model:
Any number of the following elements, in any order:
Attributes:
DOM Interfaces:

For a list of attributes and properties that can be animated using the 'animate' element, see Elements, attributes and properties that can be animated.