19 Animation

Contents

• 19.1 Introduction
• 19.2 Animation elements
  • 19.2.1 Overview
  • 19.2.2 Relationship to SMIL Animation
  • 19.2.3 Animation elements example
  • 19.2.4 Attributes to identify the target element for an animation
  • 19.2.5 Attributes to identify the target attribute or property for an animation
  • 19.2.6 Animation with namespaces
  • 19.2.7 Paced animation and complex types
  • 19.2.8 Attributes to control the timing of the animation
    • 19.2.8.1 Clock values
  • 19.2.9 Attributes that define animation values over time
  • 19.2.10 Attributes that control whether animations are additive
  • 19.2.11 Inheritance
  • 19.2.12 The Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢ element
  • 19.2.13 The Ä�ā‚¬ļæ½setÄ�ā‚¬ā„¢ element
  • 19.2.14 The Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element
  • 19.2.15 The Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element
  • 19.2.16 The Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element
  • 19.2.17 Elements, attributes and properties that can be animated
• 19.3 Animation using the SVG DOM
• 19.4 DOM interfaces
  • 19.4.1 Interface ElementTimeControl
  • 19.4.2 Interface TimeEvent
  • 19.4.3 Interface SVGAnimationElement
  • 19.4.4 Interface SVGAnimateElement
  • 19.4.5 Interface SVGSetElement
  • 19.4.6 Interface SVGAnimateMotionElement
  • 19.4.7 Interface SVGMPathElement
  • 19.4.8 Interface SVGAnimateColorElement
  • 19.4.9 Interface SVGAnimateTransformElement

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:

• Using SVG's animation elements. SVG document fragments can describe time-based modifications to the document's elements. Using the various animation elements, you can define motion paths, fade-in or fade-out effects, and objects that grow, shrink, spin or change color.
• Using the SVG DOM. The SVG DOM conforms to key aspects of the Document Object Model (DOM) Level 1 [DOM1] and Document Object Model (DOM) Level 2 [DOM2] specifications. Every attribute and style sheet setting is accessible to scripting, and SVG offers a set of additional DOM interfaces to support efficient animation via scripting. As a result, virtually any kind of animation can be achieved. The timer facilities in scripting languages such as ECMAScript can be used to start up and control the animations [ECMA-262]. (See example below.)
• SVG has been designed to allow SMIL [SMIL] to use animated or static SVG content as media components.

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) 3.0 Specification [SMIL].

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].

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

Although SVG defines Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢, its use is deprecated in favor of simply using the Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢ element to target properties that can take color values.

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

For compatibility with other aspects of the language, SVG uses IRI references via an Ä�ā‚¬ļæ½xlink:hrefÄ�ā‚¬ā„¢ attribute to identify the elements which are to be targets of the animations, as allowed in SMIL 3.0.

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 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]. 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',
         'animate' 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" />
      <animate 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

At zero seconds	Ä€Ā	At three seconds
At six 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 attribute is common to all animation elements and identifies the target element for the animation.

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

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

19.2.6 Animation with namespaces

Example animns01 below shows a namespace prefix being resolved to a namespace name in the scope of the referencing element, and that namespace name being used (regardless of the prefix which happens to be used in the target scope) to identify the attribute being animated.

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Demonstration of the resolution of namespaces for animation</title>
  <!-- at the point of definition, the QName a:href resolves to the namespace
       name "http://www.w3.org/1999/xlink" and the local name "href" -->
  <g xmlns:a="http://www.w3.org/1999/xlink">
    <animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>
  </g>
  <!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink"
       happens to be bound to the namespace prefix 'b' while the prefix
       'xlink' is bound to a different namespace name -->
  <g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar">
    <image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/>
  </g>
</svg>

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

19.2.7 Paced animation and complex types

Paced animations assume a notion of distance between the various animation values defined by the Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ attributes. Distance is defined only for scalar types (such as <length>), colors and the subset of transformation types that are supported by Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢. In the list of distance functions below, V_a and V_b represent the two values the distance between which is being calculated.

Since paced animation is intended to produce an animation with an even pace of change, it does not make sense to define distance functions for all data types. Distance can be usefully defined for types whose values are n-dimensional vectors (including scalars, which are 1-dimensional vectors). For example, a <length> value is a scalar value, and a <color> value is a 3-dimensional vector. Thus attributes of these types can have paced animation applied to them. On the other hand, a <list-of-length> (as used by Ä�ā‚¬ļæ½stroke-dasharrayÄ�ā‚¬ā„¢) is a list of scalars (1-dimensional vectors), and <list-of-points> (as used by the Ä�ā‚¬ļæ½pointsÄ�ā‚¬ā„¢ attribute on a Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢) is a list of 2-dimensional vectors. Therefore, these types do not have a distance function defined and cannot have paced animation applied to them.

The distance functions for types that support paced animation are as follows:

<coordinate>, <integer>, <length> and <number>

distance(V_a, V_b) = |V_a Ä�ļæ½ā€™ V_b|

Examples: animating the Ä�ā‚¬ļæ½xÄ�ā‚¬ā„¢ attribute on a Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢, or the Ä�ā‚¬ļæ½stroke-widthÄ�ā‚¬ā„¢ property on a Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢.

<color>

distance(V_a,Ä€Ā V_b) = sqrt((V_a.red Ä�ļæ½ā€™ V_b.red)² + (V_a.green Ä�ļæ½ā€™ V_b.green)² + (V_a.blue Ä�ļæ½ā€™ V_b.blue)²), where:

V_i.red is the red component of the V_i color value,

V_i.green is the green component of the V_i color value, and

V_i.blue is the blue component of the V_i color value.

Each of the color component values is usually in the range [0,Ä€Ā 1], where 0 represents none of that color component, and 1 represents the maximum amount of that color component, in the sRGB gamut [SRGB]. Since <color> values may specify colors outside of the sRGB gamut, these component values may lie outside the range [0,Ä€Ā 1].

Example: animating the Ä�ā‚¬ļæ½fillÄ�ā‚¬ā„¢ property on an Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢.

Transform definitions of type 'translate'

distance(V_a,Ä€Ā V_b) = sqrt((V_a.tx Ä�ļæ½ā€™ V_b.tx)² + (V_a.ty Ä�ļæ½ā€™ V_b.ty)²), where:

V_i.tx is the x component of the V_i translation transform value, and

V_i.ty is the y component of the V_i translation transform value.

Example (for all transform definition types): animating the Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ attribute on a Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢ using Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢.

Transform definitions of type 'scale'

distance(V_a,Ä€Ā V_b) = sqrt((V_a.sx Ä�ļæ½ā€™ V_b.sx)² + (V_a.sy Ä�ļæ½ā€™ V_b.sy)²), where:

V_i.sx is the x component of the V_i scale transform value, and

V_i.sy is the y component of the V_i scale transform value.

Note that, as when specifying scale transformations in a <transform-list>, if the y component of the scale is omitted it is implicitly equal to the x component.

Transform definitions of type 'rotate', 'skewX' and 'skewY'

distance(V_a,Ä€Ā V_b) = sqrt((V_a.angle Ä�ļæ½ā€™ V_b.angle)²), where:

V_i.angle is the angle component of the V_i rotation or skew transform value.

Since the distance function for rotations is not in terms of the rotation center point components, a paced animation that changes the rotation center point may not appear to have a paced movement when the animation is applied.

Distance functions for all other data types are not defined. If calcMode="paced" is used on an animation of an attribute or property whose type is not one of those listed above, the animation effect is undefined. SVG user agents may choose to perform the animation as if calcMode="linear", but this is not required. Authors are recommended not to specify paced animation on types not listed above.

19.2.8 Attributes to control the timing of the animation

The following attributes are the animation timing attributes. They 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.

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

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

19.2.8.1 Clock values

Clock values have the same syntax as in SMIL Animation specification [SMILANIM]. 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:

• Full clock values:Ä€Ā 
Ä€Ā  02:30:03Ä€Ā Ä€Ā Ä€Ā  = 2 hours, 30 minutes and 3 seconds
  Ä€Ā  50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds
• Partial clock value:Ä€Ā 
Ä€Ā  02:33Ä€Ā Ä€Ā  = 2 minutes and 33 seconds
  Ä€Ā  00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds
• Timecount values:
  Ä€Ā  3.2hÄ€Ā Ä€Ā Ä€Ā  = 3.2 hours = 3 hours and 12 minutes
  Ä€Ā  45minÄ€Ā Ä€Ā  = 45 minutes
  Ä€Ā  30sÄ€Ā Ä€Ā Ä€Ā Ä€Ā  = 30 seconds
  Ä€Ā  5msÄ€Ā Ä€Ā Ä€Ā Ä€Ā  = 5 milliseconds
  Ä€Ā  12.467Ä€Ā  = 12 seconds and 467 milliseconds

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

00.5s = 500 milliseconds
00:00.005 = 5 milliseconds

19.2.9 Attributes that define animation values over time

The following attributes are the animation value attributes. They are common to elements Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ 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.

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 the data types for which there is an appropriate distance function defined, which includes only scalar numeric types plus the types listed in Paced animation and complex types. If 'paced' is specified, any Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ or Ä�ā‚¬ļæ½keySplinesÄ�ā‚¬ā„¢ will be ignored. For Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢, this is the default Ä�ā‚¬ļæ½calcModeÄ�ā‚¬ā„¢. Authors are discouraged from using paced animation on types that do not have a distance function defined, due to its unpredictable behavior in some user agents.

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 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. Per the SMIL specification, leading and trailing white space, and white space before and after semicolon separators, is allowed and will be ignored. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation 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.

For animations specified with a Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ list, the Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ attribute if specified must have exactly as many values as there are in the Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ attribute. For from/to/by animations, the Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ attribute if specified must have two values.

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 key time associated with each value defines when the value is set; values are interpolated between the 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.

Because paced animation interpolation is unspecified for some value types, authors are encouraged to use 'linear' animation interpolation with calculated Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ to achieve particular interpolation behavior for these types.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL Animation 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. Note: SMIL allows these values to be separated either by commas with optional whitespace, or by whitespace alone. 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 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 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 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 specification. In particular, see SMIL Animation: 'by' attribute ([SMILANIM], section 3.2.2).

The SMIL Animation specification [SMILANIM] defines the detailed processing rules associated with the above attributes. Except for any SVG-specific rules explicitly mentioned in this specification, the SMIL Animation 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 with the following exception.

In order to provide behavior that is intuitive and consistent between discrete animations with an explicitly specified Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢ attribute (e.g. "from-to animation") and those where the underlying value is used (e.g. "to animation"), the behavior of discrete to-animation in SVG deviates from the definition in SMIL Animation. As with a discrete from-to animation, a discrete to animation will set the underlying value for the first half of the simple duration (or, if a Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ list is provided, until the simple duration specified by the second value in the Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ list) and the Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ value for the remainder of the simple duration.

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 function 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

Ä€Ā	keySplines="0Ä€Ā 0Ä€Ā 1Ä€Ā 1" (the default)	Ä€Ā	keySplines=".5Ä€Ā 0Ä€Ā .5Ä€Ā 1" Ä€Ā
Ä€Ā	keySplines="0Ä€Ā .75Ä€Ā .25Ä€Ā 1"	Ä€Ā	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Ä�ā‚¬ā„¢	Initial value	After 1s	After 2s	After 3s	Final value
0 0 1 1	10.0	12.5	15.0	17.5	20.0
.5 0 .5 1	10.0	11.0	15.0	19.0	20.0
0 .75 .25 1	10.0	18.0	19.3	19.8	20.0
1 0 .25 .25	10.0	10.1	10.6	16.9	20.0

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

19.2.10 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 the animation addition attributes, which are common to elements Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢.

19.2.11 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.12 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 specification. In particular, see SMIL Animation: 'animate' element ([SMILANIM], section 4.1).

The Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ property applies to color interpolations that result from animations using the Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢ element.

For a list of attributes and properties that can be animated using the Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢ element, see Elements, attributes and properties that can be animated.

19.2.13 The Ä�ā‚¬ļæ½setÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½setÄ�ā‚¬ā„¢ element provides a simple means of just setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. The Ä�ā‚¬ļæ½setÄ�ā‚¬ā„¢ element is non-additive. The additive and accumulate attributes are not allowed, and will be ignored if specified.

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

For a list of attributes and properties that can be animated using the Ä�ā‚¬ļæ½setÄ�ā‚¬ā„¢ element, see Elements, attributes and properties that can be animated.

19.2.14 The Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element causes a referenced element to move along a motion path.

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

For Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢, the specified values for Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ consists of x, y coordinate pairs, with a single comma and/or white space separating the x coordinate from the y coordinate. For example, from="33,15" specifies an x coordinate value of 33 and a y coordinate value of 15.

If provided, the Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ attribute must consists of a list of x, y coordinate pairs. Coordinate values are separated by at least one white space character or a comma. Additional white space around the separator is allowed. For example, values="10,20;30,20;30,40" or values="10mm,20mm;30mm,20mm;30mm,40mm". Each coordinate represents a length. Attributes Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ specify a shape on the current canvas which represents the motion path.

Two options are available which allow definition of a motion path using any of SVG's path data commands:

• the Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ attribute defines a motion path directly on Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element using any of SVG's path data commands.
• the Ä�ā‚¬ļæ½mpathÄ�ā‚¬ā„¢ sub-element provides the ability to reference an external Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ element as the definition of the motion path.

Note that SVG's path data commands can only contain values in user space, whereas Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ can specify coordinates in user space or using unit identifiers. See Units.

The various (x,y) points of the shape provide 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 (x,y) values of the shape computed over time. Thus, the referenced object is translated over time by the offset of the motion path relative to the origin of the current user coordinate system. The supplemental transformation is applied on top of any transformations due to the target element's Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ attribute or any animations on that attribute due to Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ elements on the target element.

The Ä�ā‚¬ļæ½additiveÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½accumulateÄ�ā‚¬ā„¢ attributes apply to Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ elements. Multiple Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ elements all simultaneously referencing the same target element can be additive with respect to each other; however, the transformations which result from the Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ elements are always supplemental to any transformations due to the target element's Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ attribute or any Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ elements.

The default calculation mode (Ä�ā‚¬ļæ½calcModeÄ�ā‚¬ā„¢) for Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ is "paced". This will produce constant velocity motion along the specified path. Note that while animateMotion elements can be additive, it is important to observe that the addition of two or more "paced" (constant velocity) animations might not result in a combined motion animation with constant velocity.

When a path is combined with "discrete", "linear" or "spline" Ä�ā‚¬ļæ½calcModeÄ�ā‚¬ā„¢ settings, and if attribute Ä�ā‚¬ļæ½keyPointsÄ�ā‚¬ā„¢ is not provided, the number of values is defined to be the number of points defined by the path, unless there are "move to" commands within the path. A "move to" command within the path (i.e. other than at the beginning of the path description) A "move to" command does not count as an additional point when dividing up the duration, or when associating Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½keySplinesÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½keyPointsÄ�ā‚¬ā„¢ values. When a path is combined with a "paced" Ä�ā‚¬ļæ½calcModeÄ�ā‚¬ā„¢ setting, all "move to" commands are considered to have 0 length (i.e. they always happen instantaneously), and is not considered in computing the pacing.

For more flexibility in controlling the velocity along the motion path, the Ä�ā‚¬ļæ½keyPointsÄ�ā‚¬ā„¢ attribute provides the ability to specify the progress along the motion path for each of the Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ specified values. If specified, Ä�ā‚¬ļæ½keyPointsÄ�ā‚¬ā„¢ causes Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ to apply to the values in Ä�ā‚¬ļæ½keyPointsÄ�ā‚¬ā„¢ rather than the points specified in the Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ attribute array or the points on the Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ attribute.

The override rules for Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ are as follows. Regarding the definition of the motion path, the Ä�ā‚¬ļæ½mpathÄ�ā‚¬ā„¢ element overrides the the Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢ attribute, which overrides Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢, which overrides Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢. Regarding determining the points which correspond to the Ä�ā‚¬ļæ½keyTimesÄ�ā‚¬ā„¢ attributes, the Ä�ā‚¬ļæ½keyPointsÄ�ā‚¬ā„¢ attribute overrides Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢, which overrides Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢, which overrides Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢.

At any time t within a motion path animation of duration dur, the computed coordinate (x,y) along the motion path is determined by finding the point (x,y) which is t/dur distance along the motion path using the user agent's distance along the path algorithm.

The following example demonstrates the supplemental transformation matrices that are computed during a motion path animation.

Example animMotion01 shows a triangle moving along a motion path.

<?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="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
  <desc>Example animMotion01 - demonstrate motion animation computations</desc>
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />
  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <path id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"  />
  <circle cx="100" cy="250" r="17.64" fill="blue"  />
  <circle cx="250" cy="100" r="17.64" fill="blue"  />
  <circle cx="400" cy="250" r="17.64" fill="blue"  />
  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

Example animMotion01

At zero seconds

Ä€Ā

At three seconds

Ä€Ā

At six seconds

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

The following table shows the supplemental transformation matrices that are applied to achieve the effect of the motion path animation.

For a list of elements that can be animated using the Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element, see Elements, attributes and properties that can be animated.

19.2.15 The Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element specifies a color transformation over time.

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

The Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ attributes take color values, where each color value is expressed using the following syntax (the same syntax as used in SVG's properties that can take color values):

<color> <icccolor>?

The Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ attribute for the Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element consists of a semicolon-separated list of color values, with each color value expressed in the above syntax.

Out of range color values can be provided, but user agent processing will be implementation dependent. User agents should clamp color values to allow color range values as late as possible, but note that system differences might preclude consistent behavior across different systems.

The Ä�ā‚¬ļæ½color-interpolationÄ�ā‚¬ā„¢ property applies to color interpolations that result from Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ animations.

The use of Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ is deprecated, since all of its functionality can be achieved simply by using Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢ to target properties that can take color values. The Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element may be dropped from a future version of the SVG specification.

For a list of attributes and properties that can be animated using the Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element, see Elements, attributes and properties that can be animated.

19.2.16 The Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element

The Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.

The Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ attributes take a value expressed using the same syntax that is available for the given transformation type:

• For a type="translate", each individual value is expressed as <tx> [,<ty>].
• For a type="scale", each individual value is expressed as <sx> [,<sy>].
• For a type="rotate", each individual value is expressed as <rotate-angle> [<cx> <cy>].
• For a type="skewX" and type="skewY", each individual value is expressed as <skew-angle>.

(See The Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ attribute.)

The Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢ attribute for the Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element consists of a semicolon-separated list of values, where each individual value is expressed as described above for Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢.

The animation effect for Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ is post-multiplied to the underlying value for additive Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ animations (see below) instead of added to the underlying value, due to the specific behavior of Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢.

From-to, from-by and by animations are defined in SMIL to be equivalent to a corresponding values animation. See the Animation function values section of SMIL Animation ([SMILANIM], section 3.2.2). However, to animations are a mixture of additive and non-additive behavior, as described in the How from, to and by attributes affect additive behavior section of SMIL Animation ([SMILANIM], section 3.3.6). To animations provide specific functionality to get a smooth change from the underlying value to the Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ attribute value, which conflicts mathematically with the requirement for additive transform animations to be post-multiplied. As a consequence, in SVG 1.1 the behavior of to animations for Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ is undefined. Authors are suggested to use from-to, from-by, by or values animations to achieve any desired transform animation.

If Ä�ā‚¬ļæ½calcModeÄ�ā‚¬ā„¢ has the value 'paced', then the "distance" for the transformation is calculated as further described in Paced animations and complex types.

When an animation is active, the effect of non-additive Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ (i.e., additive="replace") is to replace the given attribute's value with the transformation defined by the Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢. The effect of additive (i.e., additive="sum") is to post-multiply the transformation matrix corresponding to the transformation defined by this Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢. To illustrate:

<rect transform="skewX(30)"...>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="rotate" from="0" to="90" dur="5s"
                    additive="replace" fill="freeze"/>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="scale" from="1" to="2" dur="5s"
                    additive="replace" fill="freeze"/>
</rect>

In the code snippet above, because the both animations have additive="replace", the first animation overrides the transformation on the rectangle itself and the second animation overrides the transformation from the first animation; therefore, at time 5 seconds, the visual result of the above two animations would be equivalent to the following static rectangle:

<rect transform="scale(2)" ... />

whereas in the following example:

<rect transform="skewX(30)"...>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="rotate" from="0" to="90" dur="5s" 
                    additive="sum" fill="freeze"/>
  <animateTransform attributeName="transform" attributeType="XML"
                    type="scale" from="1" to="2" dur="5s"
                    additive="sum" fill="freeze"/>
</rect>

In this code snippet, because the both animations have additive="sum", the first animation post-multiplies its transformation to any transformations on the rectangle itself and the second animation post-multiplies its transformation to any transformation from the first animation; therefore, at time 5 seconds, the visual result of the above two animations would be equivalent to the following static rectangle:

<rect transform="skewX(30) rotate(90) scale(2)" ... />

Note that the zero value used when performing a by animation with type="scale" is indeed 0. Thus, performing the following animation causes the rectangle to be invisible at time 0s (since the animated transform list value is 'scale(0)'), and be scaled back to its original size at time 5s (since the animated transform list value is 'scale(1)'):

<rect width="100" height="100">
  <animateTransform attributeName="transform" attributeType="XML"
                    type="scale" by="1" dur="5s" fill="freeze"/>
</rect>

When a transform animation has accumulate='sum', the accumulation that occurs for each completed repetition of the animation is computed on the values specified in the Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element's animation value attributes (i.e., Ä�ā‚¬ļæ½valuesÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½fromÄ�ā‚¬ā„¢, Ä�ā‚¬ļæ½toÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½byÄ�ā‚¬ā„¢) and not on the transformation matrix that these values represent. For example, in the following code snippet, 3 is added to the scale value at the start of each repetition:

<rect width="100" height="100">
  <animateTransform attributeName="transform" attributeType="XML"
                    type="scale" from="2" to="3" repeatCount="3" dur="4s"
                    fill="freeze"/>
</rect>

The following graph and table shows the animated Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ value on the Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ over the course of the animation:

Time Value 0s scale(2) 1s scale(2.25) 2s scale(2.5) 3s scale(2.75) 4s scale(5) 5s scale(5.25) 6s scale(5.5) 7s scale(5.75) 8s scale(8) 9s scale(8.25) 10s scale(8.5) 11s scale(8.75) 12s scale(9)

Transform item types that can have multiple values Ä�ā‚¬ā€� 'translate', 'scale' and 'rotate' Ä�ā‚¬ā€� are treated as vectors and accumulation is performed with vector addition. Optional values that are omitted are taken to have their usual implied value: 1 for the <sy> component of a 'scale' and 0 for the <tx> component of a 'translate' and the <cx cy> components of a 'rotate'.

For example, consider the following code snippet, which has a cumulative transform animation of type 'rotate':

<rect width="100" height="100">
  <animateTransform attributeName="transform" attributeType="XML"
                    type="rotate" from="0 30 40" to="10 30 40"
                    repeatCount="2" dur="1s" fill="freeze"/>
</rect>

At time 1 second, the animated value of Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ on the Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢ will jump from 'rotate(10 30 40)' to 'rotate(10 60 80)', because the effect of the accumulation is to take the value at the end of the first repetition, '10 30 40', and add to it the value at simple duration tÄ€Ā =Ä€Ā 0s, which is '0 30 40'.

For a list of attributes and properties that can be animated using the Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element, see Elements, attributes and properties that can be animated.

19.2.17 Elements, attributes and properties that can be animated

The following lists all of the elements which can be animated by an Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element:

• Ä�ā‚¬ļæ½svgÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½defsÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½useÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½imageÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½switchÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½pathÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½rectÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½circleÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½ellipseÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½lineÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½polylineÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½polygonÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½textÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½clipPathÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½maskÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½aÄ�ā‚¬ā„¢
• Ä�ā‚¬ļæ½foreignObjectÄ�ā‚¬ā„¢

Each attribute or property within this specification indicates whether or not it can be animated by SVG's animation elements. Animatable attributes and properties are designated as follows:

Animatable: yes.

whereas attributes and properties that cannot be animated are designated:

Animatable: no.

Some properties are defined as being animatable but only for non-additive animations:

Animatable: yes (non-additive).

SVG has a defined set of basic data types for its various supported attributes and properties. For those attributes and properties that can be animated, the following table indicates which animation elements can be used to animate each of the basic data types. If a given attribute or property can take values of keywords (which are not additive) or numeric values (which are additive), then additive animations are possible if the subsequent animation uses a numeric value even if the base animation uses a keyword value; however, if the subsequent animation uses a keyword value, additive animation is not possible.

Any deviation from the above table or other special note about the animation capabilities of a particular attribute or property is included in the section of the specification where the given attribute or property is defined.

19.3 Animation using the SVG DOM

Example dom01 shows a simple animation using the DOM.

<?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="4cm" height="2cm" viewBox="0 0 400 200"
     xmlns="http://www.w3.org/2000/svg"
     onload="StartAnimation(evt)" version="1.1">
  <script type="application/ecmascript"><![CDATA[
    var timevalue = 0;
    var timer_increment = 50;
    var max_time = 5000;
    var text_element;
    function StartAnimation(evt) {
      text_element = evt.target.ownerDocument.getElementById("TextElement");
      ShowAndGrowElement();
    }
    function ShowAndGrowElement() {
      timevalue = timevalue + timer_increment;
      if (timevalue > max_time)
        return;
      // Scale the text string gradually until it is 20 times larger
      scalefactor = (timevalue * 20.) / max_time;
      text_element.setAttribute("transform", "scale(" + scalefactor + ")");
      // Make the string more opaque
      opacityfactor = timevalue / max_time;
      text_element.setAttribute("opacity", opacityfactor);
      // Call ShowAndGrowElement again <timer_increment> milliseconds later.
      setTimeout("ShowAndGrowElement()", timer_increment)
    }
    window.ShowAndGrowElement = ShowAndGrowElement
  ]]></script>
  <rect x="1" y="1" width="398" height="198"
        fill="none" stroke="blue" stroke-width="2"/>
  <g transform="translate(50,150)" fill="red" font-size="7">
    <text id="TextElement">SVG</text>
  </g>
</svg>

Example dom01

At zero seconds

Ä€Ā

At 2.5 seconds

Ä€Ā

At five seconds

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

The above SVG file contains a single graphics element, a text string that says "SVG". The animation loops for 5 seconds. The text string starts out small and transparent and grows to be large and opaque. Here is an explanation of how this example works:

• The onload="StartAnimation(evt)" attribute indicates that, once the document has been fully loaded and processed, invoke ECMAScript function StartAnimation.
• The Ä�ā‚¬ļæ½scriptÄ�ā‚¬ā„¢ element defines the ECMAScript which makes the animation happen. The StartAnimation() function is only called once to give a value to global variable text_element and to make the initial call to ShowAndGrowElement(). ShowAndGrowElement() is called every 50 milliseconds and resets the Ä�ā‚¬ļæ½transformÄ�ā‚¬ā„¢ and Ä�ā‚¬ļæ½styleÄ�ā‚¬ā„¢ attributes on the text element to new values each time it is called. At the end of ShowAndGrowElement, the function tells the ECMAScript engine to call itself again after 50 more milliseconds.
• The Ä�ā‚¬ļæ½gÄ�ā‚¬ā„¢ element shifts the coordinate system so that the origin is shifted toward the lower-left of the viewing area. It also defines the fill color and font-size to use when drawing the text string.
• The Ä�ā‚¬ļæ½textÄ�ā‚¬ā„¢ element contains the text string and is the element whose attributes get changed during the animation.

If scripts are modifying the same attributes or properties that are being animated by SVG's animation elements, the scripts modify the base value for the animation. If a base value is modified while an animation element is animating the corresponding attribute or property, the animations are required to adjust dynamically to the new base value.

If a script is modifying a property on the override style sheet at the same time that an animation element is animating that property, the result is implementation-dependent; thus, it is recommended that this be avoided.

19.4 DOM interfaces

Below are the DOM interfaces for the elements defined in this chapter. In addition, ElementTimeControl and TimeEvent, which are from SMIL Animation, are included here for easy reference.

19.4.1 Interface ElementTimeControl

SMIL Animation supports several methods for controlling the behavior of animation: beginElement(), beginElementAt(), endElement() and endElementAt(). These methods are used to begin and end the active duration of an element. Authors can (but are not required to) declare the timing to respond to the DOM using the following syntax:

<animate begin="indefinite" end="indefinite" .../>

If a DOM method call is made to begin or end the element (using beginElement(), beginElementAt(), endElement() or endElementAt()), each method call creates a single instance time (in the appropriate instance times list). These times are then interpreted as part of the semantics of lists of times, as described in Evaluation of begin and end time lists.

• The instance time associated with a beginElement() or endElement() call is the current presentation time at the time of the DOM method call.
• The instance time associated with a beginElementAt() or endElementAt() call is the current presentation time at the time of the DOM method call, plus or minus the specified offset.
• Note that beginElement() is subject to the Ä�ā‚¬ļæ½restartÄ�ā‚¬ā„¢ attribute in the same manner that event-based begin timing is. Refer also to SMIL Animation: Restarting animation ([SMILANIM], section 3.3.7).

The expectation of the following interface is that an instance of the ElementTimeControl interface can be obtained by using binding-specific casting methods on an instance of an animation element. A DOM application can use the hasFeature method of the DOMImplementation interface to determine whether the ElementTimeControl interface is supported or not. The feature string for this interface is "TimeControl".

interface ElementTimeControl {
  void beginElement();
  void beginElementAt(in float offset);
  void endElement();
  void endElementAt(in float offset);
};

Operations:

void beginElement()

Creates a begin instance time for the current time. The new instance time is added to the begin instance times list. The behavior of this method is equivalent to beginElementAt(0).

void beginElementAt(in float offset)

Creates a begin instance time for the current time plus the specified offset. The new instance time is added to the begin instance times list.

Parameters

1. float offset
   The offset from the current document time, in seconds, at which to begin the element.

void endElement()

Creates an end instance time for the current time. The new instance time is added to the end instance times list. The behavior of this method is equivalent to endElementAt(0).

void endElementAt(in float offset)

Creates a end instance time for the current time plus the specified offset. The new instance time is added to the end instance times list.

Parameters

1. float offset
   offset from the current document time, in seconds, at which to end the element.

For the corresponding Java binding, see section 6.4 of SMIL Animation [SMILANIM].

19.4.2 Interface TimeEvent

The TimeEvent interface, defined in SMIL Animation: Supported interfaces, provides specific contextual information associated with Time events.

The different types of events that can occur are:

beginEvent

This event is raised when the element local timeline begins to play. It will be raised each time the element begins the active duration (i.e. when it restarts, but not when it repeats). It may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with the beginElement or beginElementAt methods. Note that if an element is restarted while it is currently playing, the element will raise an end event and another begin event, as the element restarts.

• Bubbles: No
• Cancelable: No
• Context Info: None

endEvent

This event is raised at the active end of the element. Note that this event is not raised at the simple end of each repeat. This event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with the endElement or endElementAt methods. Note that if an element is restarted while it is currently playing, the element will raise an end event and another begin event, as the element restarts.

• Bubbles: No
• Cancelable: No
• Context Info: None

repeatEvent

This event is raised when an element local timeline repeats. It will be raised each time the element repeats, after the first iteration.
The event provides a numerical indication of which repeat iteration is beginning. The value is a 0-based integer, but the repeat event is not raised for the first iteration and so the observed values of the detail attribute will be >= 1.

• Bubbles: No
• Cancelable: No
• Context Info: detail (current iteration)

interface TimeEvent : Event {

  readonly attribute AbstractView view;
  readonly attribute long detail;

  void initTimeEvent(in DOMString typeArg, in AbstractView viewArg, in long detailArg);
};

Attributes:

view (readonly AbstractView)

The view attribute identifies the AbstractView [DOM2VIEWS] from which the event was generated.

detail (readonly long)

Specifies some detail information about the Event, depending on the type of the event. For this event type, indicates the repeat number for the animation.

Operations:

void initTimeEvent(in DOMString typeArg, in AbstractView viewArg, in long detailArg)

The initTimeEvent method is used to initialize the value of a TimeEvent created through the DocumentEvent interface. This method may only be called before the TimeEvent has been dispatched via the dispatchEvent method, though it may be called multiple times during that phase if necessary. If called multiple times, the final invocation takes precedence.

Parameters

1. DOMString typeArg
   Specifies the event type.
2. AbstractView viewArg
   Specifies the Event's AbstractView.
3. long detailArg
   Specifies the Event's detail.

For the corresponding Java binding, see section 6.4 of SMIL Animation [SMILANIM].

19.4.3 Interface SVGAnimationElement

The SVGAnimationElement interface is the base interface for all of the animation element interfaces: SVGAnimateElement, SVGSetElement, SVGAnimateColorElement, SVGAnimateMotionElement and SVGAnimateTransformElement.

Unlike other SVG DOM interfaces, the SVG DOM does not specify convenience DOM properties corresponding to the various language attributes on SVG's animation elements. Specification of these convenience properties in a way that will be compatible with future versions of SMIL Animation is expected in a future version of SVG. The current method for accessing and modifying the attributes on the animation elements is to use the standard getAttribute, setAttribute, getAttributeNS and setAttributeNS defined in DOM Level 2 Core [DOM2].

interface SVGAnimationElement : SVGElement,
                                SVGTests,
                                SVGExternalResourcesRequired,
                                ElementTimeControl {

  readonly attribute SVGElement targetElement;

  float getStartTime() raises(DOMException);
  float getCurrentTime();
  float getSimpleDuration() raises(DOMException);
};

Attributes:

targetElement (readonly SVGElement)

The element which is being animated.

Operations:

float getStartTime()

Returns the begin time, in seconds, for this animation element's current interval, if it exists, regardless of whether the interval has begun yet. If there is no current interval, then a DOMException with code INVALID_STATE_ERR is thrown.

Returns

The start time, in seconds, of this animation element's current interval.

Exceptions

DOMException, code INVALID_STATE_ERR

The animation element does not have a current interval.

float getCurrentTime()

Returns the current time in seconds relative to time zero for the given time container.

Returns

The current time in seconds relative to time zero for the given time container.

float getSimpleDuration()

Returns the number of seconds for the simple duration for this animation. If the simple duration is undefined (e.g., the end time is indefinite), then an exception is raised.

Returns

number of seconds for the simple duration for this animation.

Exceptions

DOMException, code NOT_SUPPORTED_ERR

The simple duration is not determined on the given element.

19.4.4 Interface SVGAnimateElement

The SVGAnimateElement interface corresponds to the Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢ element.

Object-oriented access to the attributes of the Ä�ā‚¬ļæ½animateÄ�ā‚¬ā„¢ element via the SVG DOM is not available.

interface SVGAnimateElement : SVGAnimationElement,
                              SVGStylable {
};

19.4.5 Interface SVGSetElement

The SVGSetElement interface corresponds to the Ä�ā‚¬ļæ½setÄ�ā‚¬ā„¢ element.

Object-oriented access to the attributes of the Ä�ā‚¬ļæ½setÄ�ā‚¬ā„¢ element via the SVG DOM is not available.

interface SVGSetElement : SVGAnimationElement {
};

19.4.6 Interface SVGAnimateMotionElement

The SVGAnimateMotionElement interface corresponds to the Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element.

Object-oriented access to the attributes of the Ä�ā‚¬ļæ½animateMotionÄ�ā‚¬ā„¢ element via the SVG DOM is not available.

interface SVGAnimateMotionElement : SVGAnimationElement {
};

19.4.7 Interface SVGMPathElement

The SVGMPathElement interface corresponds to the Ä�ā‚¬ļæ½mpathÄ�ā‚¬ā„¢ element.

interface SVGMPathElement : SVGElement,
                            SVGURIReference,
                            SVGExternalResourcesRequired {
};

19.4.8 Interface SVGAnimateColorElement

The SVGAnimateColorElement interface corresponds to the Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element.

Object-oriented access to the attributes of the Ä�ā‚¬ļæ½animateColorÄ�ā‚¬ā„¢ element via the SVG DOM is not available.

interface SVGAnimateColorElement : SVGAnimationElement,
                                   SVGStylable {
};

19.4.9 Interface SVGAnimateTransformElement

The SVGAnimateTransformElement interface corresponds to the Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element.

Object-oriented access to the attributes of the Ä�ā‚¬ļæ½animateTransformÄ�ā‚¬ā„¢ element via the SVG DOM is not available.

interface SVGAnimateTransformElement : SVGAnimationElement {
};