16 Animation

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

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

Attribute definitions:

xlink:href = "<XMLRI>"

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

The target element must be part of the current SVG document fragment. If the target element is not part of the current SVG document fragment, then the animation is ignored.

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

'xlink:href' must point to exactly one target element. If 'xlink:href' points to multiple target elements then it shall be treated as an unsupported value and processed as if the attribute had not been specified. If xlink:href="" (empty string), it shall be treated as if the 'xlink:href' attribute was not specified.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1 Animation Modules: Specifying the animation target.

Animatable: no.

    <define name='svg.AnimateAttributeCommon.attr'>
      <optional>
        <attribute name='attributeName'  svg:animatable='false' svg:inheritable='false'><text/></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>
      

Attribute definitions:

attributeName = "attributeName"

Specifies the name of the target attribute. A qualified name, if used, indicates the XML namespace for the attribute. The prefix will be resolved to a namespace name in the scope of the current (i.e. the referencing) animation element. Note that while the 'attributeName' attribute is optional, there is no lacuna value. When no value is specified the animation still runs, and events related to the animation element (e.g. beginEvent) are still fired, but the animation doesn't apply to any attribute.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1 Animation Modules: Specifying the animation target.

Animatable: no.

attributeType = "CSS" | "XML" | "auto"

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

"CSS"

This specifies that the value of 'attributeName' is the name of a property defined as animatable in this specification.

"XML"

This specifies that the value of 'attributeName' is the name of an XML attribute defined in the default XML namespace for the target element. If the value for 'attributeName' has a prefix, the implementation must use the associated namespace name as defined in the scope of the target element. The attribute must be defined as animatable in this specification.

"auto"

The implementation should match the 'attributeName' to an attribute for the target element. The implementation must first search through its list of supported CSS properties for a matching property name (all properties supported by the implementation, not just those defined by SVG), and if none is found, search the default XML namespace for the element.

The lacuna value is auto.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1 Animation Modules: Specifying the animation target.

In the absence of style sheets (external style sheets, style element, style attribute) animation of presentation attributes is equivalent to animating the corresponding property. Thus, for properties listed in SVG Tiny 1.2, the same effect occurs from animating the presentation attribute with attributeType="XML" as occurs with animating the corresponding property with attributeType="CSS".

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

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

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

Attribute definitions:

begin = "begin-value-list"

Defines when the element should begin (i.e. become active). The attribute value is a semicolon separated list of values.

The definition of begin-value-list is as follows:

begin-value-list ::= begin-value (S? ";" S? begin-value-list )?

A semicolon separated list of begin values. The interpretation of a list of begin times is detailed in SMIL 2.1 section on "Evaluation of begin and end time lists".

begin-value : ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | "indefinite" )

Describes the element begin.

offset-value ::= ( S? "+" | "-" S? )? ( <Clock-value> )

For SMIL 2.1, this describes the element begin as an offset from an implicit syncbase. For SVG, the implicit syncbase begin is defined to be relative to the document begin. Negative begin times are entirely valid and easy to compute, as long as there is a resolved document begin time.

syncbase-value ::= ( Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? <Clock-value> )?

Describes a syncbase and an optional offset from that syncbase. The element begin is defined relative to the begin or active end of another animation. A syncbase consists of an ID reference to another animation element followed by either begin or end to identify whether to synchronize with the beginning or active end of the referenced animation element.

event-value ::= ( Id-value "." )? ( event-ref ) ( S? ("+"|"-") S? <Clock-value> )?

Describes an event and an optional offset that determine the element begin. The animation begin is defined relative to the time that the event is raised. The list of event-symbols available for a given event-base element is listed in the 'Animation event name' column in Complete list of supported events. Details of event-based timing are described in SMIL 2.1: Unifying Event-based and Scheduled Timing.

repeat-value ::= ( Id-value "." )? "repeat(" integer ")" ( S? ("+"|"-") S? <Clock-value> )?

Describes a qualified repeat event. The element begin is defined relative to the time that the repeat event is raised with the specified iteration value.

accessKey-value ::= "accessKey(" character ")" ( S? ("+"|"-") S? <Clock-value> )?

Describes an accessKey that determines the element begin. The element begin is defined relative to the time of the keydown event corresponding to the specified key. From a formal processing model perspective, accessKey is a keydown event listener on the document which behaves as if stopPropagation() and preventDefault() have both been invoked in the capture phase.



The "character" value can be one of two types. It can be any of the keyboard event identifier strings listed in Appendix A.2 of the DOM3 Events specification [DOM3Events]. Alternatively, this value can contain the characters generated by a given character device. This may be a single Unicode character or a non-empty sequence of Unicode characters [UNICODE]. In this case, the “character” value is mapped to a keyboard identifier for the purpose of processing the accessKey event listener. For example, accessKey(‘Q’) will translate into a keydown event listener using "U+0051" as the target keyboard identifier string.

"indefinite"

The begin of the animation will be determined by a beginElement() method call or a hyperlink targeted to the element. (Hyperlink-based timing is described in SMIL 2.1 Timing and Synchronization: Hyperlinks and timing.)

In SVG, if no begin is specified, the default timing of the time container is equivalent to an offset value of 0. If the begin attribute is in error, in the list itself or in any of the individual list values, it is equivalent to a single begin value of indefinite. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'begin' attribute and the special parsing rules for Id-value and event-ref as described in SMIL 2.1: Parsing timing specifiers.

Animatable: no.

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

Specifies the simple duration. The attribute value can be either of the following:

<Clock-value>

Specifies the length of the simple duration in document time. Value must be greater than 0.

media

Specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media.

(For SVG's animation elements, if media is specified, the attribute will be ignored.)

indefinite

Specifies the simple duration as indefinite.

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

Animatable: no.

end = "end-value-list"

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

end-value-list ::= end-value (S? ";" S? end-value-list )?

A semicolon separated list of end values. The interpretation of a list of end times is detailed below.

end-value : ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | "indefinite" )

Describes the active end of the animation.

A value of indefinite specifies that the end of the animation will be determined by an endElement() method call.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see description of SMIL 2.1: 'end' attribute and the special parsing rules for Id-value and event-ref as described in SMIL 2.1: Parsing timing specifiers.

Animatable: no.

min = "<Clock-value>" | "media"

Specifies the minimum value of the active duration. The attribute value can be either of the following:

<Clock-value>

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

Value must be greater than 0.

media

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

The lacuna value for min is 0. This does not constrain the active duration at all.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'min' attribute.

Animatable: no.

max = "<Clock-value>" | "media"

Specifies the maximum value of the active duration. The attribute value can be either of the following:

<Clock-value>

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

Value must be greater than 0.

media

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

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'max' attribute.

Animatable: no.

restart = "always" | "whenNotActive" | "never"

always

The animation can be restarted at any time. 

This is the lacuna value.

whenNotActive

The animation can only be restarted when it is not active (i.e. after the active end). Attempts to restart the animation during its active duration are ignored.

never

The element cannot be restarted for the remainder of the current simple duration of the parent time container. (In the case of SVG, since the parent time container is the SVG document fragment, then the animation cannot be restarted for the remainder of the document duration.)

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'restart' attribute.

Animatable: no.

repeatCount = "<number>" | "indefinite"

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

<number>

This is a (base 10) "floating point" numeric value that specifies the number of iterations. It can include partial iterations expressed as fraction values. A fractional value describes a portion of the simple duration. Values must be greater than 0.

indefinite

The animation is defined to repeat indefinitely (i.e. until the document ends).

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'repeatCount' attribute.

Animatable: no.

repeatDur = "<Clock-value>" | "indefinite"

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

<Clock-value>

Specifies the duration in document time to repeat the animation function f(t).

"indefinite"

The animation is defined to repeat indefinitely (i.e. until the document ends).

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'repeatDur' attribute.

Animatable: no.

fill = "freeze" | "remove"

This attribute can have the following values:

freeze

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

remove

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'fill' attribute.

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.

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

    <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 is linear, however if the attribute does not support linear interpolation (e.g. for strings), the 'calcMode' attribute is ignored and discrete interpolation is used.

discrete

This specifies that the animation function will jump from one value to the next without any interpolation.

linear

Simple linear interpolation between values is used to calculate the animation function. Except for 'animateMotion', this is the default 'calcMode'.

paced

Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any 'keyTimes' or 'keySplines' will be ignored. For 'animateMotion', this is the default 'calcMode'.

spline

Interpolates from one value in the 'values' list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are defined in the 'keyTimes' attribute, and the control points for each interval are defined in the 'keySplines' attribute.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'calcMode' attribute.

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 the SMIL 2.1 specification. In particular, see SMIL 2.1: 'values' attribute and 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.

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 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 there are any errors in the 'keyTimes' specification (bad values, too many or too few values) 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.



Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'keyTimes' attribute.

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. 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 '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 the SMIL 2.1 specification. In particular, see SMIL 2.1: 'keySplines' attribute.

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 the SMIL 2.1 specification. In particular, see SMIL 2.1: 'from' attribute.

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 the SMIL 2.1 specification. In particular, see SMIL Animation: 'to' attribute.

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 the SMIL 2.1 specification. In particular, see SMIL 2.1: 'by' attribute.

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

The processing rules for the variants of 'from'/ 'to'/'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’.

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.

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

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

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

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

Attribute definitions:

additive = "replace" | "sum"

Controls whether or not the animation is additive. 

sum

Specifies that the animation will add to the underlying value of the attribute and other lower priority animations.

replace

Specifies that the animation will override the underlying value of the attribute and other lower priority animations. This is the default, however the behavior is also affected by the animation value attributes 'by' and 'to', as described in SMIL 2.1: Simple animation functions specified by from, to and by.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'additive' attribute.

Animatable: no.

accumulate = "none" | "sum"

Controls whether or not the animation is cumulative. 

sum

Specifies that each repeat iteration after the first builds upon the last value of the previous iteration.

none

Specifies that repeat iterations are not cumulative. This is the default.

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



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



Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the SMIL 2.1 specification. In particular, see SMIL 2.1: 'accumulate' attribute.

Animatable: no.

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

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

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

Attribute definitions:

to = "<value>"

Specifies the value for the attribute during the duration of the 'set' element. The argument value must match the attribute type.

Animatable: no.

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

Attribute definitions:

calcMode = "discrete" | "linear" | "paced" | "spline"

Specifies the interpolation mode for the animation. Refer to general description of the calcMode attribute above. The only difference is that the lacuna value for the calcMode for 'animateMotion' is paced. See SMIL 2.1: 'calcMode' attribute for 'animateMotion'.

Animatable: no.

path = <PathData>

The motion path, expressed in the same format and interpreted the same way as the d= attribute on the 'path' element. The effect of a motion path animation is to add 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 computed X and Y values computed over time.

Animatable: no.

keyPoints = "<list of numbers>"

Takes a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the object shall move at the moment in time specified by corresponding 'keyTimes' value. Distance calculations use the user agent's distance along the path algorithm. Each progress value in the list corresponds to a value in the 'keyTimes' attribute list.

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

If there are any errors in the 'keyPoints' specification (bad values, too many or too few values) the 'keyPoints' attribute has an unsupported value and is processed as if the attribute had not been specified

Animatable: no.

rotate = "<angle>" | "auto" | "auto-reverse"

auto

Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path.

auto-reverse

Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path plus 180 degrees.

<angle>

Represents an angle relative to the x-axis of current user coordinate system.

The rotate attribute adds a supplemental transformation matrix onto the CTM to apply a rotation transformation about the origin of the current user coordinate system. The rotation transformation is applied after the supplemental translation transformation that is computed due to the path attribute. The lacuna value is 0.

Animatable: no.

origin = "default"

See definition in SMIL 2.1: 'origin'. It has no effect in SVG.

Animatable: no.

<?xml version="1.0"?>
<svg width="5cm" height="3cm"  viewBox="0 0 500 300"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     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 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>
    

<?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"  
        width="100%" height="100%" viewBox="0 0 80 60">
        <desc>mpath example</desc>
        <path xml:id="mpathRef" d="M15,43 C15,43 36,20 65,33" fill="none" stroke="black" stroke-width="1"/>
        <animateMotion begin="0s" dur="6s" calcMode="linear" fill="freeze">
                <mpath xlink:href="#mpathRef"/>
        </animateMotion>        
</svg>
    

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

Attribute definitions:

xlink:href = "<XMLRI>"

An IRI reference to the 'path' element which defines the motion path.

Animatable: no.

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

<color> |  currentColor | none | inherit

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

Attribute definitions:

type = "translate" | "scale" | "rotate" | "skewX" | "skewY"

Indicates the type of transformation which is to have its values change over time. If 'type' has an unsupported value (e.g. type="foo" or type="ref(svg)") the 'animateTransform' element is ignored.

Animatable: no.

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

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

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

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

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

<?xml version="1.0"?>
<svg width="4cm" height="2cm" viewBox="0 0 400 200" xml:id="root"
     xmlns:ev="http://www.w3.org/2001/xml-events"   
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <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;
    
    // We need a "class" that "implements" the EventListener interface
    // (i.e. have an handleEvent method)
    SomeListenerClass.prototype = new Object();
    function SomeListenerClass() {}
    SomeListenerClass.prototype.handleEvent = function(evt) {
  	  if (evt.target == mytimer) {
        showAndGrowElement();
	  }
    }

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

      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", someListenerObject, false);
        
         // Start the timer. Which 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>