first

Daisy 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

16 Animation

Contents

• 16.1 Introduction
• 16.2 Animation elements
  • 16.2.1 Overview
  • 16.2.2 Relationship to SMIL 2.1 Animation
  • 16.2.3 Animation elements example
  • 16.2.4 Attributes to identify the target element for an animation
  • 16.2.5 Attributes to identify the target attribute or property for an animation
  • 16.2.6 Animation with namespaces
  • 16.2.7 Paced animation and complex types
  • 16.2.8 Attributes to control the timing of the animation
  • 16.2.9 Attributes that define animation values over time
  • 16.2.10 Attributes that control whether animations are additive
  • 16.2.11 Inheritance
  • 16.2.12 The 'animate' element
  • 16.2.13 The 'set' element
  • 16.2.14 The 'animateMotion' element
  • 16.2.15 The 'mpath' element
  • 16.2.16 The 'animateColor' element
  • 16.2.17 The 'animateTransform' element
  • 16.2.18 Attributes and properties that can be animated
• 16.3 Animation using the SVG DOM
• 16.4 Animation and the bounding box

16.1 Introduction

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 uDOM. The SVG uDOM conforms to the Document Object Model (DOM) Level 3 specification [DOM3]. Some of the SVG attributes are accessible to scripting and by manipulating them many kind of animations can be achieved. The timer facility in the uDOM can be used to start up and control the animations. (See example below.)

16.2 Animation elements

16.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) 2.1 Specification [SMIL21].

SVG incorporates the animation features defined in the SMIL 2.1 specification and provides some SVG-specific extensions.

For an introduction to the approach and features available in any language that supports SMIL 2.1 Animationanimation, see the Introduction and animation sandwich model sections of the SMIL 2.1 Animation overview and SMIL 2.1 animation model. Modules ([SMIL21], sections 3.2 and 3.3.3). For the list of animation features which go beyond SMIL Animation, see SVG extensions to SMIL 2.1 Animation below.

16.2.2 Relationship to SMIL 2.1 Animation

SVG is a host language in terms of SMIL 2.1 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 are those in the SMIL 2.1 Animation Modules and the SMIL 2.1 Timing and Synchronization chapter ([SMIL21], sections 3 and 10). Note that the SMIL timing engine is orthogonal to the rendering tree.

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

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

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.

SMIL 2.1 Animation requires that the host language define the meaning for document begin and document end, and these are defined in the Definitions section.

16.2.3 Animation elements example

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

<?xml version="1.0"?>
<svg width="8cm" height="3cm"  viewBox="0 0 800 300"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <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 xml:id="RectElement" x="300" y="100" width="300" height="100"
        fill="rgb(255,255,0)"  >
    <animate attributeName="x" 
             begin="0s" dur="9s" fill="freeze" from="300" to="0" />
    <animate attributeName="y" 
             begin="0s" dur="9s" fill="freeze" from="100" to="0" />
    <animate attributeName="width" 
             begin="0s" dur="9s" fill="freeze" from="300" to="800" />
    <animate attributeName="height" 
             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 xml:id="TextElement" x="0" y="0"
          font-family="Verdana" font-size="35.27" visibility="hidden"  > 
      It's alive!
      <set attributeName="visibility" 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"
           from="rgb(0,0,255)" to="rgb(128,0,0)"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" 
           type="rotate" from="-30" to="0"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" 
           type="scale" from="1" to="3" additive="sum"
           begin="3s" dur="6s" fill="freeze" />
    </text>
  </g>
</svg>

At zero seconds

At three seconds

At six seconds

At nine seconds

The sections below describe the various animation attributes and elements.

16.2.4 Attributes to identify the target element for an animation

The following attributes are common to all animation elements and identify the target element for the animation. If the target element is not capable of being a target of the animation, then the animation is ignoredhas no effect.

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.

    <define name='svg.AnimateCommon.attr'>
      <ref name='svg.XLink.attr'/>
      <ref name='svg.Conditional.attr'/>
    </define>

If the 'xml:id' or 'id' attribute of an element that is the target of an animation is changed, then whether this affects the animation is undefined, and implementation dependent. Future specifications will describe in more detail the result of modifying elements that affect animation elements which are already in the document tree.

Resolution of the animation target occurs when the animation element is inserted into the document tree or at the document begin time, whichever is later. (See also the 'timelineBegin' attribute, which controls when the document begin time occurs.)

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

    <define name='svg.AnimateAttributeCommon.attr'>
      <optional>
        <attribute name='attributeName' svg:animatable='false' svg:inheritable='false'>
          <ref name='QName.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='attributeType' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>XML</value>
            <value>CSS</value>
            <value>auto</value>
          </choice>
        </attribute>
      </optional>
    </define>

16.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.2" baseProfile="tiny" 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>

16.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. The following table explains how the distance between values of different types should be computed.

Distance is defined for types which can be expressed as a list of values, where each value is a vector of scalars in an n-dimensional space. For example, an angle value is a list of one value in a 1-dimensional space and a color is a list of 1 value in a 3-dimensional space.

Animation is based on the computed value of properties. Thus, keywords such as inherit which yield a computed value may be animated because the computed value is a scalar or list of scalars. For example, fill="inherit" may be animated if the computed value of fill is a color.

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 <points-data> (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.

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

The These timing attributes also applies apply to Media Elements media elements.

    <define name='svg.AnimateTiming.attr' combine='interleave'>
      <ref name='svg.AnimateTimingNoMinMax.attr'/>
      <optional><attribute name='min' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='max' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

    <define name='svg.AnimateTimingNoMinMax.attr' combine='interleave'>
      <ref name='svg.AnimateTimingNoFillNoMinMax.attr'/>
      <optional>
        <attribute name='fill' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>remove</value>
            <value>freeze</value>
          </choice>
        </attribute>
      </optional>
    </define>

    <define name='svg.AnimateTimingNoFillNoMinMax.attr' combine='interleave'>
      <ref name='svg.AnimateBegin.attr'/>
      <optional><attribute name='dur' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='end' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='repeatCount' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='repeatDur' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional>
        <attribute name='restart' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>always</value>
            <value>never</value>
            <value>whenNotActive</value>
          </choice>
        </attribute>
      </optional>
    </define>

    <define name='svg.AnimateBegin.attr' combine='interleave'>
      <optional><attribute name='begin' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

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

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

SMIL 2.1

defines the detailed processing rules associated with the above attributes.

event-base element

This section is informative.

For a normative reference definition of event-base elementelements, see the SMIL 2.1 Animation Modules ([SMIL21], section 3) and the multimedia Multimedia section of this specification. For declarative animation or elements and the 'discard' elements element, the default event-base element is the animation target, which for elements with an 'xlink:href' attribute is the target IRI, and is otherwise the parent element. The default event-base element for all SVG Media media elements (e.g. 'audio', 'video', and 'animation') is the element itself. For all event-values that are prefaced with an Id-value, the event-base element is the element indicated by that idID.

Authoring Notenote: non-rendered elements such as the 'audio' element cannot receive user-initiated pointer events, so it is recommended that authors specify a rendered element as the event-base element for such cases when using user interface events.

Clock values

Clock values have a subsetted syntax of the clock values syntax defined in SMIL 2.1: Clock values: ([SMIL21], section 10.4.1):

Clock-val         ::= Timecount-val
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "s" | "ms"
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
DIGIT             ::= [0-9]

For Timecount 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 document time.

The following are examples of legal clock values:

• Timecount values:
    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

16.2.9 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 to be used between discrete particular values.

    <define name='svg.AnimateToCommon.attr' combine='interleave'>
      <optional><attribute name='to' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

    <define name='svg.AnimateValueCommon.attr'>
      <ref name='svg.AnimateToCommon.attr'/>
      <optional>
        <attribute name='calcMode' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>discrete</value>
            <value>linear</value>
            <value>paced</value>
            <value>spline</value>
          </choice>
        </attribute>
      </optional>
      <optional><attribute name='values' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='keyTimes' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='keySplines' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='from' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='by' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

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

lacuna value is 'linear

, however

', except on 'animateMotion' elements where it is 'paced'. However if the target attribute does not support

linear

interpolation (e.g.

for strings

when animating an attribute whose type is <string>), the 'calcMode' attribute is ignored and discrete

interpolation

animation 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

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

specified in the 'keyTimes' attribute, and the control points for each interval are

defined

specified in the 'keySplines' attribute.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Simple animation function attributes section of the SMIL 2.1

specification. In particular, see SMIL 2.1: 'calcMode' attribute.

Animation Modules ([SMIL21], section 3.5.2).

Animatable: no.

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 found in the Simple animation function attributes section of the SMIL 2.1

specification. In particular, see SMIL 2.1: 'values' attribute and note

Animation Modules ([SMIL21], section 3.5.2). Note that, per the SMIL specification, leading and trailing white space, and white space before and after semi-colon separators, is allowed and will be ignored.

For compatibility with existing content, SVG extends the syntax of this attribute to allow a trailing semicolon (with optional surrounding whitespace) without creating a new value in the list. Thus, for example, "10; 20; 30;" has the same meaning as "10; 20; 30" and specifies a list of three values. Note that a zero-length string is a valid value for IRIs, which means that to use such a value as the final value in a 'values' attribute an addition semicolon is required. For example, "/a.txt; ; /b.txt;" is a list of three IRI values (the second of which is a zero-length string, i.e. a reference to the current document), while "/a.txt; ; /b.txt; ;" is a list of four values (where the second and fourth are both zero-length strings).

Animatable: no.

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

• the first time value in the list must be 0, and the last time value in the list must be 1. The 'keyTimes' value associated with each value defines when the value is set; values are interpolated between the 'keyTimes'.

• 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 the 'keyTimes' attribute has a value that doesn't conform to the above requirements the 'keyTimes' attribute has an unsupported value and is processed as if the attribute had not been specified.

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 found in the Calculation mode attributes section of the SMIL 2.1

specification. In particular, see SMIL 2.1: 'keyTimes' attribute

Animation Modules ([SMIL21], section 3.8.1).

Animatable: no.

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 2.1 allows these values to be separated either by commas with optional

whitespace

white space, or by

whitespace

white space 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

set 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 the 'keySplines' attribute has a value that doesn't conform to the above requirements the 'keySplines' attribute has an unsupported value and is processed as if the attribute had not been specified.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Calculation mode attributes section of the SMIL 2.1

specification. In particular, see SMIL 2.1: 'keySplines' attribute

Animation Modules ([SMIL21], section 3.8.1).

Animatable: no.

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 found in the Simple animation functions specified by from, to and by section of the SMIL 2.1

specification. In particular, see SMIL 2.1: 'from' attribute.

Animation Modules ([SMIL21], section 3.5.4).

Animatable: no.

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 found in the Simple animation functions specified by from, to and by section of the SMIL 2.1

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

Animation Modules ([SMIL21], section 3.5.4).

Animatable: no.

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 found in the Simple animation functions specified by from, to and by section of the SMIL 2.1

specification. In particular, see SMIL 2.1: 'by' attribute.

Animation Modules ([SMIL21], section 3.5.4).

Animatable: no.

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

The animation values specified in the animation element 'values', 'from', 'to' and 'by' attributes must be legal values for the specified target 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, they are considered to be unsupported and is processed as if they had not been specified.

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 the 'values' attribute is specified, any 'from', 'to' and or 'by' attribute values are ignored.

The processing rules for the variants of from/to/by animations, including which of the 'from'/ , 'to'/ and 'by' animations are described in Animation function values.If a 'by' value is used on a non-scalar data type ( such as color or transform ), the starting 0 delta value is to be conceptually considered as ‘identity’ attributes take precedence over the others, is described in Simple animation functions specified by from, to and by ([SMIL21], section 3.5.4).

When animating properties, interpolation is performed on computed values. Thus, keywords such as inherit which yield a numeric computed value may be included in the values list for an interpolated animation. For example, a linear animation of the 'fill' property using values="red; inherit; blue" is possible as long as the inherit value does not compute to a paint server reference, a system paint or the none value.

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' function. 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 section in SMIL 2.1 Timing and Synchronization ([SMIL21], section 10.4.3).

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:

keySplines

values 

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

16.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 units:

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

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

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

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

For more information about additive animations, see SMIL 2.1: Additive animation. For ([SMIL21], section 3.3.6) and for more information on cumulative animations, see SMIL 2.1: Controlling behavior of repeating animation - Cumulative animation ([SMIL21], section 3.3.5).

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

    <define name='svg.AnimateAdditionCommon.attr'>
      <optional>
        <attribute name='additive' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>replace</value>
            <value>sum</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='accumulate' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>none</value>
            <value>sum</value>
          </choice>
        </attribute>
      </optional>
    </define>

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

16.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="fill-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 found in The animate element section of the SMIL 2.1 specification. In particular, see SMIL 2.1: 'animate' elementAnimation Modules ([SMIL21], section 3.6.1).

    <define name='animate'>
      <element name='animate'>
        <ref name='animate.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='animate.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
    </define>

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

In the case where an 'animate' element is animating a color value, the same calculation method as the 'animateColor' element is used. That is, 'animate' and 'animateColor' have identical behavior when animating colors.

16.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 most attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. The 'set' element is non-additive. The cannot perform additive or cumulative animation; 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 found in The set element section of the SMIL 2.1 specification. In particular, see SMIL 2.1: 'set' element.Animation Modules ([SMIL21], section 3.6.2).

    <define name='set'>
      <element name='set'>
        <ref name='set.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='set.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateToCommon.attr'/>
    </define>

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

16.2.14 The 'animateMotion' element

The 'animateMotion' element causes a referenced its target element to move along a motion path.

Any element that can take a 'transform' attribute may have animateMotion motion animations applied to it. See the transform attribute in the attribute table appendix for a list of these elements.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is found in The animateMotion element section of the SMIL 2.1 specification. In particular, see SMIL 2.1: 'animateMotion' element.Animation Modules ([SMIL21], section 3.6.3).

    <define name='animateMotion'>
      <element name='animateMotion'>
        <ref name='animateMotion.AT'/>
        <zeroOrMore>
          <ref name='animateCommon.CM'/>
        </zeroOrMore>
        <optional>
          <ref name='mpath'/>
        </optional>
        <zeroOrMore>
          <ref name='animateCommon.CM'/>
        </zeroOrMore>
      </element>
    </define>

    <define name='animateMotion.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <optional><attribute name='path' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='keyPoints' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='rotate' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='origin' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

For 'animateMotion', the specified values for 'from', 'by', 'to' and 'values' consists consist 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 consist 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" specifies a list of three coordinate pairs. Each coordinate represents is represented by a <length>. Attributes 'from', 'by', 'to' and 'values' specify a shape on the current canvas in the target element's user coordinate system which represents the motion path.

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

• the a 'path' attribute, which defines a motion path directly on an 'animateMotion' element using any of SVG 's path data commands.
• the an 'mpath' sub-element child element of the 'animateMotion' element, which 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.Note that any styling on the an 'animateMotion' or 'mpath' elements element does not affect the defined path. For example, specifying a dashed stroke won't will not cause the animation to jump from dash to dash.

The various (x, y) points of the shape provide a supplemental transformation matrix to be post-multiplied onto the CTM for the referenced object of the target element, 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 target element 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 targetting that 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 interpolation 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 an 'animateMotion' element has a 'path' is combined with discrete, linear or spline 'calcMode' settingscalcMode' of 'discrete', 'linear' or 'spline', and if attribute the 'keyPoints' attribute is not providedspecified, 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 'data. A "move to" command within the ' path' (, i.e. other than at the beginning of the 'path' description) as the first path data command, does not count as an additional point when dividing up the duration, or when associating 'keyTimes', 'keySplines' and 'keyPoints' values. When a 'pathcalcMode' is combined with a 'paced'calcMode' setting, all "move to" commands are considered to have 0 zero length (i.e. they always happen instantaneously), and is are not considered in when 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 'motion 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'/'to'. Regarding determining the points which that correspond to the 'keyTimes' attributes attribute, the 'keyPoints' attribute overrides 'path' and 'mpath', which overrides 'values', which overrides 'from'/'by'/'to'.

At any time t within a motion path animation of duration dur, the computed coordinate pair (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 a path algorithm.

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

Example animMotion0119_02 shows a triangle moving along a motion path.

Example: 19_02.svg

<?xml version="1.0"?>
<svg widthxmlns="5cmhttp://www.w3.org/2000/svg"
height="3cm"  viewBox="0 0 500 300"
     xmlnsxmlns:xlink="http://www.w3.org/20001999/svgxlink"
     version="1.2" baseProfile="tiny" width="5cm" height="3cm" viewBox="0 0 500 xmlns:xlink="http://www.w3.org/1999/xlink" 300">

  <desc>Example animMotion0119_02 - 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 xml: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>

At zero seconds

At three seconds

At six seconds

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

16.2.15 The 'mpath' element

The 'mpath' element is a sub element to the 'animateMotion' element (its only place in the document tree is as a used to reference an existing 'path' element for use as a motion animation path. It may appear only as the child of an 'animateMotion'). element to which it provides the path.

Example mpath01 demonstrates the use of an 'mpath' reference element that references an external existing 'path' element that will serve as the definition of the motion pathis rendered. Without 'mpath', the path data would have to be repeated in a 'path' attribute on the 'animateMotion' element.

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"  
        widthversion="100%1.2" heightbaseProfile="100%tiny" viewBox="0 0 80 60">

  <desc>Example demonstrating the use of <desc>mpath example<the 'mpath' element.</desc>

       <path xml:id="mpathRef" d="M15,43 C15,43 36,20 65,33" fill="none" stroke="black" stroke-width="1"/>
  <circle r="5" fill="blue">
    <animateMotion begin="0s" dur="6s" calcMode="linear" fill="freeze">
                <mpath xlink:href="#mpathRef"/>
        </animateMotion>        
  </circle>
</svg>

At two seconds

At four seconds

At six seconds

    <define name='mpath'>
      <element name='mpath'>
        <ref name='mpath.AT'/>
        <zeroOrMore><ref name='svg.Desc.group'/></zeroOrMore>
      </element>
    </define>

    <define name='mpath.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.XLinkRequired.attr'/>
    </define>

16.2.16 The 'animateColor' element

The 'animateColor' element specifies a color transformation transition over time.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is found in The animateColor element section of the SMIL 2.1 specification. In particular, see SMIL 2.1: 'animateColor' element.Animation Modules ([SMIL21], section 3.6.4).

    <define name='animateColor'>
      <element name='animateColor'>
        <ref name='animateColor.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='animateColor.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
    </define>

The 'from', 'by' and 'to' attributes take color values, where each color value is expressed using the following syntax (the same syntax as is used in SVG's properties that can take color values):

<color> |  currentColor | none | inherit

In the case of 'currentColor' and 'inherit', if these evaluate to a color then all animation modes may be used. Otherwise, and in the case where 'none' is specified, only discrete animation may be usedby the 'solid-color' property (a <color>, currentColor or inherit), or the additional value none. The 'values' attribute for the 'animateColor' element consists of takes a semicolon-separated list of color values , with each color value expressed in the above syntax.using that same syntax.

Interpolated animation (that is, an animation where 'calcMode' is 'linear', 'paced' or 'spline') can be performed for color animations if none of the values involved is 'none'. Otherwise, only discrete animation can be performed.

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.

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

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

    <define name='animateTransform'>
      <element name='animateTransform'>
        <ref name='animateTransform.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='animateTransform.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
      <ref name='svg.AnimateTypeCommon.attr'/>
    </define>

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

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 underlying value of transform animation effect for 'animateTransform' is post-multiplied to the underlying value for additive 'animateTransform' animations (see SMIL discussion of animation function values) is the corresponding identity transformation value. Thus, the underlying value for

• type="translate" is tx = ty = 0
• type="scale" is sx = sy = 1
• type="rotate" is rotate-angle = cx = cy = 0
• type="skewX" and type="skewY" is skew-angle = 0

Note that this results in counter-intuitive results for a to animation. Since the underlying value is identity, and the 'additive' attribute is ignored on to animations according to SMIL, such animations will behave like a non-additive from-to animation where the "from" value is identitybelow) instead of added to the underlying value, due to the specific behavior of 'animateTransform'.

From-to, from-by and by animations are defined by SMIL to be equivalent to a corresponding values animations. See the Simple animation functions specified by from, to and by section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.4). However, to animations are a mixture of additive and non-additive behavior, as described in the To animation section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.4). 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 Tiny 1.2 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 consisting of the sum of the absolute values of the differences between each pair of values as further described in Paced animations and complex types.

When an animation is active, the effect of a 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 an additive animation (i.e. additive="sum") is to post-multiply the transformation matrix corresponding to the transformation defined by this 'animateTransform' to the base set of transformations representing the underlying value. 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 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)" ...

/>

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

16.2.18 Attributes and properties that can be animated

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.

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 below indicates which animation elements can be used to animate each of the basic data types.

If the computed value of a given attribute or property and the values specified in an animation can all be converted to numeric values, then additive animations are possible; however, if the animation or base value uses one or more keyword values which cannot be converted to a numeric value, additive animation is not possible.

In the example below, the 'fill' property has a base an underlying value of "currentColor" and is animated from "red" to "#DDF". The value of the 'color' property is yellow.

<rect color="yellow" fill="currentColor">
  

<animateColor attributeName="fill" from="red" to="#DDF" 
                begin="1s" dur="5s" fill="freeze" additive="sum"/>
</rect>

The animation can be additive, because the computed value of the 'fill' property is yellow, which can be converted to an RGB color which is a triple of numeric values (255, 255, 0); the keyword "red" can likewise be converted to an RGB color which is a triple of numeric values (255, 0, 0), as can the value "#DDF" which corresponds to (221, 221, 255). Had any of these values been keywords which could not be converted to a numeric representation - for example "none" or ", such as none or url(#foo)" - , then the animation could not have been additive.

Note: all animations that are additive are also cumulative.

Any type listed in the table as being able to participate in an additive animation can also participate in a cumulative animation.

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.

If an attribute or property value is modified while an additive animation element is animating the same attribute or property, the animation must adjust dynamically to the new value.

16.3 Animation using the SVG DOM

Example dom_animate shows a simple animation using the DOM.

<?xml version="1.0"?>
<svg width="4cm" height="2cm" viewBox="0 0 400 200" xml:id="root"xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny"
 xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny    width="4cm" height="2cm" viewBox="0 0 400 200">

  <desc>A simple animation using the uDOM and the Timer interface of the uDOM.</desc>

  <script type="application/ecmascript"><![CDATA[
    var timeValue = 0;
    var timerIncrement = 50;
    var maxTime = 5000;
    var textElement;
    var svgRoot;
    var mytimer;

        // WeA needlistener a "class" that "implements" for the EventListenertimer
interface     // (i.e. have an handleEvent method)
    SomeListenerClass.prototype = new Object();
    function SomeListenerClass() {}
    SomeListenerClass.prototype.handleEvent = function(function someListener(evt) {
  	  if (evt.target == mytimer) {
        showAndGrowElement();
	  }     }

    function init() {
      textElement = document.getElementById("svgtext");
      svgRoot = document.getElementById("root")documentElement;

      launchTimer();
    }

       function launchTimer() {
         // Fire timer event as soon as possible, initialInterval = 0
         // Timer event must be sent every 50 ms, repeatInterval = 50
         someTimer = createTimer(0 , 50);
	
             // Instantiate the listener object
         var someListenerObject = new SomeListenerClass();
        
         // Add a listener for the "SVGTimer" event
         someTimer.addEventListener("SVGTimer", someListenerObjectsomeListener, false);

       
         // Start the timer., Whichwhich will fire the first event immediately as initialInterval is 0.
         someTimer.start();
       }

    function showAndGrowElement() {
      timeValue += timerIncrement;

            // Scale the text string gradually until it is 20 times larger
      scalefactor = (timeValue * 20.) / maxTime;
      var matrix = svgRoot.createSVGMatrixComponents(scalefactor, 0, 0, scalefactor, 0, 0);
      textElement.setMatrixTrait("transform", matrix);

            // Make the string more opaque
      var opacityFactor = timeValue / maxTime;
      textElement.setFloatTrait("fill-opacity", opacityFactor);

            if (timeValue >= maxTime) {
     	   someTimer.stop();
      }
    }
  ]]></script>

    <handler type="application/ecmascript" ev:event="load">
        init();
  </handler>

    <rect x="1" y="1" width="398" height="198" fill="none" stroke="blue" stroke-width="2"/>
  <g transform="translate(50,150)" font-size="7" stroke="none">
    <text fill="red" fill-opacity="0" xml:id="svgtext">SVG</text>
  </g>
  
</svg>

At zero seconds

At 2.5 seconds

At five seconds

The above SVG file contains a 'text' element 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:

• A unique 'handler' is declared in the example to handle the

  '

  load

  '

  event:

  
        <handler type="application/ecmascript" ev:event="load">
        
  

     init

      init();
        </handler>
  

  Once the document has been fully loaded and processed, this 'handler' invokes the ECMAScript function init().

• The 'script' element defines the ECMAScript which drives the animation. The init() function is only called once to give a value to global variables textElement and svgRoot and to create and launch

  a Timer

  an SVGTimer object via the launchTimer()

  method

  function. showAndGrowElement() sets the 'transform' attribute and 'fill-opacity

  attributes

  property on the 'text' element to new values each time it is called.

• A class of objects (SomeListenerClass) which implement EventListener interface is declared in the global scripting context. An object of this class is then instantiated in

  The someListener function is used as an EventListener object. In the launchTimer()

  method and given

  function, someListener is passed as a parameter

  of

  to the addEventListener()

  on

  method of the timer object so that

  the handleEvent()

  it is called each time an

  '

  SVGTimer

  '

  event is

  triggered

  dispatched. (

  the '

  The someTimer

  '

  object is the only target of this event). This way, it is possible to register a listener on a timer object using scripting.

• Because an

  '

  SVGTimer

  '

  event is

  triggered

  dispatched regularly, showAndGrowElement() is called every 50 milliseconds and changes the text attributes thereby animating the text. showAndGrowElement() checks each time it is invoked whether the maximum duration of the animation has been reached and, if so, calls the stop() method on the timer object

  when this happens, so that

  to stop the animation

  stops

  .

If an attribute/property value is modified while an animation element is animating the same attribute/property, the animations are required to adjust dynamically to the new value.

16.4 Animation and the bounding box

The effects of animation may affect change the bounding box of animated elements. For details on this, see the definition for of the bounding boxin the Coordinate Systems, Transformations and Units chapter.