Movatterモバイル変換

Abstract

This specification defines SVG Animations, a set of features basedon SMIL for declaratively animating SVG content.

Status of This Document

This section describes the status of this document at the time of itspublication. Other documents may supersede this document. A list of current W3Cpublications and the latest revision of this technical report can be found intheW3C technical reports index at http://www.w3.org/TR/.

This document is the 08 March 2023Editor’s Draft of SVG Animation.The purpose of this specification is to separate out SVG's animationfeatures into a separate document.

Comments on this Editor’s Draft are welcome.Comments can be sent towww-svg@w3.org,the public email list for issues related to vector graphics on the Web. This list isarchived andsenders must agree to have their message publicly archived from theirfirst posting. To subscribe send an email towww-svg-request@w3.org withthe wordsubscribe in the subject line.

This document has been produced by theW3C SVG Working Group as part oftheGraphics Activity withintheW3C Interaction Domain. Thegoals of the W3C SVG Working Group are discussed in theW3C SVG Charter.The W3C SVG Working Group maintains a public Web page,http://www.w3.org/Graphics/SVG/,that contains further background information. The authors ofthis document are the SVG Working Group participants.

This document was produced by a group operating under the5 February 2004 W3C Patent Policy.W3C maintains apublic list of any patent disclosuresmade in connection with the deliverables of the group; that page also includesinstructions for disclosing a patent. An individual who has actual knowledge ofa patent which the individual believes containsEssential Claim(s)must disclose the information in accordance withsection 6 of the W3C Patent Policy.

Publication as a Editor’s Draft does not imply endorsement by the W3C Membership.This is a draft document and may be updated, replaced or obsoleted by other documentsat any time. It is inappropriate to cite this document as other than work in progress.

A list of current W3C Recommendations and other technical documents can be found athttp://www.w3.org/TR/. W3C publicationsmay be updated, replaced, or obsoleted by other documents at any time.

This document is governed by the1 August 2014 W3C Process Document.

1. Introduction

This section is non-normative.

SVG supports the ability to change vector graphics over time. SVG content canbe animated in the following ways:

• Using SVG'sanimation elements. SVG document fragments can describe time-based modifications to the document's elements. Using the various animation elements, authors can define motion paths, or interpolate the element's attributes and style properties. These effects can be chained together or triggered in response to other events in the document.
• UsingCSS Animations [CSSANIMATIONS]. A CSS module that describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
• UsingCSS Transitions [CSS3TRANSITIONS]. A CSS module that allows changes to values of CSS properties to occur smoothly over a specified duration.
• Using theSVG DOM. The SVG DOM is defined based on the DOM4 specification [DOM4]. Every attribute and style sheet setting is accessible to scripting, and SVG offers a set of additional DOM interfaces to support efficient animation via scripting. (Seeexample below.)

1.1. Module interactions

This module extends definitions in SVG 2.[SVG2]

2. Animation elements

2.1. Overview

SVG's animation elements were developed in collaborationwith the W3C Synchronized Multimedia (SYMM) Working Group,developers of theSynchronized Multimedia Integration Language(SMIL) 3.0 Specification [SMIL].

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

For an introduction to the approach and features availablein any language that supports SMIL Animation, seeSMIL Animation overviewandSMIL Animation animation model([SMILANIM], sections 2 and 3). For the list of animationfeatures which go beyond SMIL Animation, seeSVG extensions to SMIL Animation.

2.2. Definitions

animation element

An animation element is an element that can be used to animate the attribute or property value of another element. The following elements are animation elements:‘animate’,‘animateMotion’,‘animateTransform’,‘discard’ and‘set’.

animation event attribute

An animation event attribute is anevent attribute that specifies script to run for a particular animation-related event. SeeAnimation event attributes. The animation event attributes are‘onbegin’,‘onend’ and‘onrepeat’.

2.3. Relationship to SMIL Animation

SVG is a host language in terms of SMIL Animation andtherefore introduces additional constraints and features aspermitted by that specification. Except for any SVG-specificrules explicitly mentioned in this specification, the normativedefinition for SVG's animation elements and attributes is theSMIL Animationspecification [SMILANIM].

SVG supports the following three animation elements which aredefined in the SMIL Animation specification:

‘animate’	allows attributes and properties to be assigned different values over time
‘set’	a convenient shorthand for‘animate’, which produces a discrete change to an animated attribute or property. It is most commonly used with values which do not support linear interpolation, such as thevisibility property
‘animateMotion’	moves an element along a motion path

Additionally, SVG includes the following compatibleextensions to SMIL Animation:

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

For compatibility with other aspects of the language, SVGusesURL references via an‘href’ attribute toidentify the elements which are to be targets of the animations,as allowed in SMIL 3.0.

SMIL Animation requires that the host language define themeaning fordocument begin and thedocument end. Since an‘svg’ is sometimes the root ofthe XML document tree and other times can be a component of aparent XML grammar, the document begin for a givenSVG document fragment is defined to be the exact time at which the‘svg’ element'sload event istriggered. The document end of an SVG documentfragment is the point at which the document fragment has beenreleased and is no longer being processed by the user agent.However, nested‘svg’ elements within an SVGdocument do not constitute document fragments in this sense,and do not define a separate document begin; all times withinthe nested SVG fragment are relative to the document timedefined for the root‘svg’ element.

For SVG, the termpresentation timeindicates the position in the timeline relativeto the document begin of a given documentfragment.

2.4. Animation elements example

Example anim01 belowdemonstrates each of SVG's four animation elements.

<?xml version="1.0" standalone="no"?><svg width="8cm" height="3cm"  viewBox="0 0 800 300"     xmlns="http://www.w3.org/2000/svg">  <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 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',         'animate' and 'animateTransform' elements. The 'text' element         below starts off hidden (i.e., invisible). At 3 seconds, it:           * becomes visible           * continuously moves diagonally across the viewport           * changes color from blue to dark red           * rotates from -30 to zero degrees           * scales by a factor of three. -->    <text 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" />      <animate 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>

Example anim01

At zero seconds		At three seconds
At six seconds		At nine seconds

Viewthis example as SVG (SVG-enabled browsers only)

The sections below describe the various animation attributesand elements.

2.7. Animation with namespaces

Exampleanimns01 below shows a namespace prefix being resolvedto a namespace name in the scope of the referencing element, andthat namespace name being used (regardless of the prefix whichhappens to be used in the target scope) to identify theattribute being animated.

<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg">  <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" 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' -->  <g xmlns:b="http://www.w3.org/1999/xlink">    <image b:href="one.png" x="35" y="50" width="410" height="160"/>  </g></svg>

2.8. Paced animation and complex types

Paced animations assume a notion of distance between the variousanimation values defined by the‘to’,‘from’,‘by’ and‘values’attributes. Distance is defined only for scalar types (such as<length>), colorsand the subset of transformation types that are supported by‘animateTransform’.In the list of distance functions below, V_a and V_brepresent the two values the distance between which is being calculated.

Since paced animation is intended to produce an animation with an evenpace of change, it does not make sense to define distance functionsfor all data types. Distance can be usefully defined for types whosevalues aren-dimensional vectors (including scalars, which are1-dimensional vectors). For example, a<length> value is a scalarvalue, and a<color> valueis a 3-dimensional vector. Thus attributes of these types can have pacedanimation applied to them. On the other hand, a<dasharray>(as used by‘stroke-dasharray’)is a list of scalars (1-dimensional vectors), and<points> (as used bythe‘points’attribute on a‘polygon’)is a list of 2-dimensional vectors. Therefore, these types do not have adistance function defined and cannot have paced animation applied to them.

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

<integer>,<length> and<number>

distance(V_a, V_b) = |V_a − V_b|

Examples: animating the‘x’ attribute on a‘text’, or thestroke-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 thefill 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 thex component of the V_i translation transform value, and

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

Example (for all transform definition types): animating thetransform 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 thex component of the V_i scale transform value, and

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

Note that, as when specifying scale transformations in a<transform-list>, if they component of the scale is omitted it is implicitly equal to thex 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.IfcalcMode="paced" is used on ananimation of an attribute or property whose type is not one ofthose listed above, the animation effect is undefined.SVG user agents may choose toperform the animation as ifcalcMode="linear",but this is not required. Authors are recommended not to specifypaced animation on types not listed above.

2.9. Attributes to control the timing of the animation

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

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

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

Align with whitespace used in CSS and SVG, adding #xC to S.

Attribute definitions:

Name	Value	Initial value	Animatable
begin	begin-value-list	0s	no

Attribute syntax needs fixing.

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

The attribute value is a semicolon separated list of values.

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

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

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

Describes the element begin.

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

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

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

Describes asyncbase 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 eitherbegin orend to identify whether to synchronize with the beginning or active end of the referenced animation element.

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

Describes an event and an optional offset that determine the element begin. The animation begin is defined relative to the time that the event is raised. The list of event-symbols available for a given event-base element is the list of event attributes available for the given element as defined in theScripting and Interactivity chapter, with the one difference that the leading 'on' is removed from the event name (i.e., the animation event name is 'click', not 'onclick'). A list of all events supported by SVG can be found inComplete list of supported events. Details of event-based timing are described in SMIL Animation: Unifying Event-based and Scheduled Timing.

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

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

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

Describes an accessKey that determines the element begin. The element begin is defined relative to the time that the accessKey character is input by the user.

wallclock-sync-value ::= "wallclock(" wallclock-value ")"

Describes the element begin as a real-world clock time. The wallclock time syntax is based upon syntax defined inRepresentation of dates and times [ISO8601].

"indefinite"

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

The animation DOM methods are described inIDL.

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

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

Name	Value	Initial value	Animatable
dur	Clock-value | "media" | "indefinite"	indefinite	no

Attribute syntax needs fixing.

Specifies the simple duration.

The attribute value can be one of the following:

Clock-value

Specifies the length of the simple duration inpresentation 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'sanimation 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 theSMIL Animation specification. In particular, see SMIL Animation: 'dur' attribute ([SMILANIM], section 3.2.1).

Name	Value	Initial value	Animatable
end	end-value-list	(none)	no

Attribute syntax needs fixing.

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

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

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

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

Describes the active end of the animation.

A value of'indefinite' specifies that the end of the animation will be determined by anendElement method call (the animation DOM methods are described inIDL).

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

Name	Value	Initial value	Animatable
min	Clock-value | "media"	0s	no
max	Clock-value | "media"	(none)	no

Attribute syntax needs fixing.

The‘min’ and‘max’ attributes specify the minimum and maximum value of the active duration, respectively.

The attribute values can be either of the following:

Clock-value

Specifies the length of the minimum or maximum 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'sanimation elements, if'media' is specified, the attribute will be ignored.)

The initial value for‘min’ is'0' and there is no initial value for‘max’. In both cases, this does not constrain the active duration at all.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for these attributes is theSMIL Animation specification. In particular, seeSMIL Animation: The min and max attributes ([SMILANIM], section 3.3.3).

Name	Value	Initial value	Animatable
restart	always | whenNotActive | never	always	no

always

The animation can be restarted at any time. This is the default value.

whenNotActive

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

never

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'restart' attribute ([SMILANIM], section 3.3.7).

Name	Value	Initial value	Animatable
repeatCount	<number> | indefinite	(none)	no

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 theSMIL Animation specification. In particular, seeSMIL Animation: 'repeatCount' attribute ([SMILANIM], section 3.3.1).

Name	Value	Initial value	Animatable
repeatDur	Clock-value | "indefinite"	(none)	no

Attribute syntax needs fixing.

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

Clock-value

Specifies the duration inpresentation time to repeat the animation functionf(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 theSMIL Animation specification. In particular, seeSMIL Animation: 'repeatDur' attribute ([SMILANIM], section 3.3.1).

Name	Value	Initial value	Animatable
fill	freeze | remove	remove	no

This attribute can have the following values:

freeze

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

remove

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'fill' attribute ([SMILANIM], section 3.3.5).

TheSMIL Animationspecification [SMILANIM] defines the detailed processingrules associated with the above attributes. Except for any SVG-specificrules explicitly mentioned in this specification, the SMIL Animationspecification is the normative definition of the processing rules forthe above attributes.

2.9.1. Clock values

Clock values have the same syntax as inSMIL Animationspecification [SMILANIM]. The grammar forclock values is repeated here:

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

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

Clock values describepresentation time.

2.10. Attributes that define animation values over time

The following attributes are theanimation value attributes.They are common to elements‘animate’,‘animateMotion’ and‘animateTransform’. Theseattributes define the values that are assigned to the targetattribute or property over time. The attributes below providecontrol over the relative timing of keyframes and theinterpolation method between discrete values.

Attribute definitions:

Name	Value	Initial value	Animatable
calcMode	discrete | linear | paced | spline	(none)	no

Specifies the interpolation mode for the animation. This can take any of the following values. The default mode is'linear', however if the attribute does not support linear interpolation (e.g. for strings), the‘calcMode’ attribute is ignored and discrete interpolation is used.

discrete

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

linear

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

paced

Defines interpolation to produce an even pace of change across the animation. This is only supported for the data types for which there is an appropriate distance function defined, which includes only scalar numeric types plus the types listed inPaced animation and complex types. If'paced' is specified, any‘keyTimes’ or‘keySplines’ will be ignored. For‘animateMotion’, this is the default‘calcMode’. Authors are discouraged from using paced animation on types that do not have a distance function defined, due to its unpredictable behavior in some user agents.

spline

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'calcMode' attribute ([SMILANIM], section 3.2.3).

Name	Value	Initial value	Animatable
values	(see below)	(none)	no

The‘values’ attribute specifies a sequence of values to use over the course of the animation.

The attribute is parsed as follows:

1. Letattribute be the value of the‘values’ attribute.
2. Letvalues be a list of strings formed by splittingattribute at each U+003B SEMICOLON character.
3. Strip any leading and trailingwhite space characters from each value ofvalues.
4. Remove the final value invalues if it is the empty string.
5. Parse each value invalues using the rules for parsing the attribute identified by the‘href’, and‘attributeName’ attributes.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'values' attribute ([SMILANIM], section 3.2.2).

Name	Value	Initial value	Animatable
keyTimes	<number> [;<number>]* ;?	(none)	no

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 the last semicolon separator is followed by either just white space or no more characters, ignore both the separator and the trailing white space.

For animations specified with a‘values’ list, the‘keyTimes’ attribute if specified must have exactly as many values as there are in the‘values’ attribute. For from/to/by animations, the‘keyTimes’ attribute if specified must have two values.

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

The‘keyTimes’ list semantics depends upon the interpolation mode:

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

If the interpolation mode is'paced', the‘keyTimes’ attribute is ignored.

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

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

Because paced animation interpolation is unspecified for some value types, authors are encouraged to use'linear' animation interpolation with calculated‘keyTimes’ to achieve particular interpolation behavior for these types.

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'keyTimes' attribute ([SMILANIM], section 3.2.3).

Name	Value	Initial value	Animatable
keySplines	<control-point> [;<control-point>]* ;?	(none)	no

where:

<control-point> =<number> ,?<number> ,?<number> ,?<number>

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.

If the last semicolon separator is followed by either just white space or no more characters, ignore both the separator and the trailing white space.

Each control point description is a set of four values:x1 y1 x2 y2, describing the Bézier control points for one time segment. Note:SMIL allows these values to be separated either by commas with optional whitespace, or by whitespace alone. The‘keyTimes’ values that define the associated segment are the Bézier "anchor points", and the‘keySplines’ values are the control points. Thus, there must be one fewer sets of control points than there are‘keyTimes’.

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

This attribute is ignored unless the‘calcMode’ is set to'spline'.

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'keySplines' attribute ([SMILANIM], section 3.2.3).

Name	Value	Initial value	Animatable
from,to,by	(see below)	(none)	no

The‘from’ and‘to’ attributes specify the starting and ending value of the animation, while the‘by’ attribute specifies a relative offset value for the animation.

All three attributes must be parsed using the rules for parsing the attribute identified by the‘href’ and‘attributeName’ attributes.

For example, if‘href’ identified a‘circle’ element and‘attributeName’ is'stroke-width', then the‘from’,‘to’ or‘by’ attribute is parsed as a [<percentage> |<length>].

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for these attributes is theSMIL Animation specification. In particular, seeSMIL Animation: Animation function values ([SMILANIM], section 3.2.2).

TheSMIL Animation specification [SMILANIM]defines the detailed processingrules associated with the above attributes. Except for anySVG-specific rules explicitly mentioned in thisspecification, the SMIL Animation specification is the normative definition ofthe processing rules for the above attributes.

The animation values specified in the animation elementmust be legal values for the specified attribute. Leading andtrailing white space, and white space before and aftersemicolon separators, will be ignored.

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

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

The processing rules for the variants offrom/by/to animations are described inAnimation function values with the following exception.

In order to provide behavior that is intuitive and consistentbetween discrete animations with an explicitly specified‘from’ attribute (e.g. "from-to animation") and thosewhere the underlying value is used (e.g. "to animation"), thebehavior of discrete to-animation in SVG deviates from thedefinition in SMIL Animation.As with a discrete from-to animation, a discrete to animationwill set the underlying value for the first half of the simpleduration (or, if a‘keyTimes’ list is provided, until thesimple duration specified by the second value in the‘keyTimes’list) and the‘to’ value for the remainder of the simpleduration.

The following figure illustrates the interpretation of the‘keySplines’ attribute. Each diagram illustratesthe effect of‘keySplines’ settings for a singleinterval (i.e. between the associated pairs of values in the‘keyTimes’ and‘values’ lists.). Thehorizontal axis can be thought of as the input value for theunit progress of interpolation within the interval -i.e. the pace with which interpolation proceeds along thegiven interval. The vertical axis is the resulting value fortheunit progress, yielded by the function thatthe‘keySplines’ attribute defines. Another way of describingthis is that the horizontal axis is the inputunittime for the interval, and the vertical axis is theoutputunit time. See also the sectionTiming and real-world clock times.

Examples ofkeySplines

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 casesabove, the approximate interpolated values as the animationproceeds are:

keySplines values

Value of‘keySplines’	Initial value	After 1s	After 2s	After 3s	Final value
0 0 1 1	10.0	12.5	15.0	17.5	20.0
.5 0 .5 1	10.0	11.0	15.0	19.0	20.0
0 .75 .25 1	10.0	18.0	19.3	19.8	20.0
1 0 .25 .25	10.0	10.1	10.6	16.9	20.0

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

2.11. Attributes that control whether animations are additive

It is frequently useful to define animation as an offset ordelta to an attribute's value, rather than as absolute values.

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

It is frequently useful for repeated animations to buildupon the previous results, accumulating with each iteration.

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

For more information about additive animations, seeSMIL Animation: Additive animation. For more information oncumulative animations, seeSMIL Animation: Controlling behavior of repeating animation -Cumulative animation.

The following attributes are theanimation addition attributes,which are common to elements‘animate’,‘animateMotion’ and‘animateTransform’.

Attribute definitions:

Name	Value	Initial value	Animatable
additive	replace | sum	replace	no

Controls whether or not the animation is additive.

replace

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

sum

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'additive' attribute ([SMILANIM], section 3.3.6).

Name	Value	Initial value	Animatable
accumulate	none | sum	none	no

Controls whether or not the animation is cumulative.

none

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

sum

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

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

Cumulative animation is not defined for "to animation".

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

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is theSMIL Animation specification. In particular, seeSMIL Animation: 'accumulate' attribute ([SMILANIM], section 3.3.1).

2.12. Inheritance

SVG allows both attributes and properties to be animated. Ifa given attribute or property is inheritable by descendants,then animations on a parent element such as a‘g’ element has the effect ofpropagating the attribute or property animation values todescendant elements as the animation proceeds; thus, descendantelements can inherit animated attributes and properties fromtheir ancestors.

2.13. The‘animate’ element

The‘animate’ element isused to animate a single attribute or property over time.

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

Except for any SVG-specific rules explicitly mentioned in thisspecification, the normative definition for this element is theSMIL Animation specification.In particular, seeSMIL Animation: 'animate' element([SMILANIM], section 4.1).

Thecolor-interpolation property applies to color interpolationsthat result from animations using the‘animate’ element.

For a list of attributes and properties that can be animatedusing the‘animate’ element, seeElements,attributes and properties that can be animated.

2.14. The‘set’ element

The‘set’ element providesa simple means of just setting the value of an attribute for aspecified duration. It supports all attribute types, includingthose that cannot reasonably be interpolated, such as stringand boolean values. The‘set’element is non-additive. The additive and accumulate attributesare not allowed, and will be ignored if specified.

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

Attribute definitions:

Name	Value	Initial value	Animatable
to	<value>	(none)	no

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

For a list of attributes and properties that can be animatedusing the‘set’ element, seeElements,attributes and properties that can be animated.

2.15. The‘discard’ element

The‘discard’ element allows authors to specify the time at which particular elements are to be discarded, thereby reducing the resources required by anSVG user agent. This is particularly useful to help SVG viewers conserve memory while displaying long-running documents. This element will not be processed by static SVG viewers.

The‘discard’ element may occur wherever the‘animate’ element may.

Attribute definitions:

Name	Value	Initial value	Animatable
href	URL[URL]	(none)	no

AnURL reference that identifies thetarget element to discard. See the definition of‘href’ onanimation elements for details on identifying a target element. Note, however, that unlike otheranimation elements, the‘discard’ element does not support the deprecated‘xlink:href’ attribute.

Note that if the target element is not part of thecurrent SVG document fragment then whether the target element will be removed or not is defined by the host language.

If the‘href’ attribute is not provided, then the target element will be the immediate parent element of the discard element.

Name	Value	Initial value	Animatable
begin	<begin-value-list>	0s	no

Attribute syntax needs fixing.

Indicates when the target element will be discarded. See the definition of‘begin’ onanimation elements for details.

The‘discard’ element has an implicitsimple duration of"indefinite". As soon as the element'sactive duration starts, theSVG user agent discards the element identified by the‘href’ attribute ([SMIL], section 5.4.5). The removal operation acts as ifremoveChild were called on the parent of the target element with the target element as parameter. [DOM4] TheSVG user agent must remove the target node as well as all of its attributes and descendants.

After removal of thetarget element, the‘discard’ element is no longer useful. It must also be discarded following the target element removal. If the‘href’ attribute has aninvalid URL reference (the target element did not exist, for example), the‘discard’ element itself must still be removed following activation.

Seeking backwards in the timeline ([SMIL], section 5.4.5) must not re-insert the discarded elements. Discarded elements are intended to be completely removed from memory. So, authors are encouraged to set the‘playbackorder’ attribute to"forwardonly" when using the‘discard’ element.

The‘discard’ element itself can be discarded prior to its activation, in which case it will never trigger the removal of its own target element.SVG user agents must allow the‘discard’ element to be the target of another‘discard’ element.

The following example demonstrates a simple usage of the‘discard’ element. The list below describes relevant behavior in the document timeline of this example:

At time = 0:

When the document timeline starts, the blue ellipse starts to move down the page.

At time = 1 second:

The red rectangle starts moving up the page.

At time = 2 seconds:

The‘animateTransform’ on the‘ellipse’ ends. The‘ellipse’ and its children are also discarded, as it is thetarget element of a‘discard’ withbegin="2". The green‘polygon’ starts to move across the page.

At time = 3 seconds:

The animation on the red rectangle ends. The rectangle and its children are discarded as it is the target of a‘discard’ element withbegin="3".

At time = 4 seconds:

The animation on the green triangle ends. The green‘polygon’ and its children are discarded as it is the target of a‘discard’ element withbegin="4".

<svg xmlns="http://www.w3.org/2000/svg" width="352" height="240" playbackorder="forwardonly">      <ellipse cx="98.5" cy="17.5" rx="20.5" ry="17.5" fill="blue" stroke="black"            transform="translate(9 252) translate(3 -296)">    <animateTransform attributeName="transform" begin="0s" dur="2s" fill="remove"                      calcMode="linear" type="translate" additive="sum"                      from="0 0" to="-18 305"/>    <discard begin="2s"/>  </ellipse>    <rect x="182" y="-39" width="39" height="30" fill="red" stroke="black"        transform="translate(30 301)">    <animateTransform attributeName="transform" begin="1s" dur="2s" fill="remove"                      calcMode="linear" type="translate" additive="sum"                      from="0 0" to="-26 -304"/>    <discard begin="3s"/>  </rect>    <polygon points="-66,83.5814 -43,123.419 -89,123.419" fill="green" stroke="black"            transform="matrix(1 0 0 1.1798 0 -18.6096)">    <animateTransform attributeName="transform" begin="2s" dur="2s"                      fill="remove" calcMode="linear" type="translate" additive="sum"                      from="0 0" to="460 63.5699"/>    <discard begin="4s"/>  </polygon></svg>

2.16. The‘animateMotion’ element

The‘animateMotion’ element causes a referenced element tomove along a motion path.

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

Attribute definitions:

Name	Value	Initial value	Animatable
calcMode	discrete | linear | paced | spline	paced	no

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

Name	Value	Initial value	Animatable
path	svg-path[EBNF]	(none)	no

The motion path, expressed in the same format and interpreted the same way as thed geometric property for the‘path’ element. The effect of a motion path animation is to add a supplemental transformation matrix onto theCTM 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.

Name	Value	Initial value	Animatable
keyPoints	<number> [;<number>]* ;?	(none)	no

‘keyPoints’ 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'sdistance 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 the last semicolon separator is followed by either just white space or no more characters, ignore both the separator and the trailing white space.

If there are any errors in the‘keyPoints’ specification (bad values, too many or too few values), then the document is in error (seeError processing).

Name	Value	Initial value	Animatable
rotate	<number> | auto | auto-reverse	0	no

The‘rotate’ attribute post-multiplies a supplemental transformation matrix onto theCTM of the target element 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.

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.

<number>

Indicates that the target element has a constant rotation transformation applied to it, where the rotation angle is the specified number of degrees.

Name	Value	Initial value	Animatable
origin	default	default	no

The‘origin’ attribute isdefined in the SMIL Animation specification ([SMILANIM], section 4.3). It has no effect in SVG.

Attribute definitions:

Name	Value	Initial value	Animatable
href	URL[URL]	(none)	no

AURL reference to the‘path’ element orshape element which defines the motion path. Refer to the common handling defined forURL reference attributes anddeprecated XLink attributes.

For‘animateMotion’, the specified values for‘from’,‘by’,‘to’ and‘values’ consists of x, y coordinate pairs, with a single comma and/or white space separating the x coordinate from the y coordinate. For example,from="33,15" specifies an x coordinate value of33 and a y coordinate value of15.

If provided, the‘values’ attribute must consists of a list of x, y coordinate pairs. Coordinate values are separated by at least one white space character or a comma. Additional white space around the separator is allowed. For example,values="10,20;30,20;30,40" orvalues="10mm,20mm;30mm,20mm;30mm,40mm". Each coordinate represents a<length>. Attributes‘from’,‘by’,‘to’ and‘values’ specify a shape on the current canvas which represents the motion path.

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

• the‘path’ attribute defines a motion path directly on‘animateMotion’ element using any of SVG'spath data commands.
• the‘mpath’ sub-element provides the ability to reference an external‘path’ element orshape element as the definition of the motion path. If the‘mpath’ sub-element refers to ashape element, the motion path is defined by theequivalent path of theshape element.

Note that SVG'spath data commands can only contain values in local coordinate system, whereas‘from’,‘by’,‘to’ and‘values’ can specify coordinates in local coordinate system or using unit identifiers. SeeUnits.

The various (x,y) points of the shape provide a supplemental transformation matrix onto theCTM for the referenced object which causes a translation along the x- and y-axes of the current user coordinate system by the (x,y) values of the shape computed over time. Thus, the referenced object is translated over time by the offset of the motion path relative to the origin of the current user coordinate system. The supplemental transformation is applied on top of any transformations due to the target element'stransform property or any animations on that attribute due to‘animateTransform’ elements on the target element.

The‘additive’ and‘accumulate’ attributes apply to‘animateMotion’ elements. Multiple‘animateMotion’ elements all simultaneously referencing the same target element can be additive with respect to each other; however, the transformations which result from the‘animateMotion’ elements are always supplemental to any transformations due to the target element'stransform property or any‘animateTransform’ elements.

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

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

For more flexibility in controlling the velocity along the motion path, the‘keyPoints’ attribute provides the ability to specify the progress along the motion path for each of the‘keyTimes’ specified values. If specified,‘keyPoints’ causes‘keyTimes’ to apply to the values in‘keyPoints’ rather than the points specified in the‘values’ attribute array or the points on the‘path’ attribute.

The override rules for‘animateMotion’ are as follows. Regarding the definition of the motion path, the‘mpath’ element overrides the‘path’ attribute, which overrides‘values’, which overrides‘from’,‘by’ and‘to’. Regarding determining the points which correspond to the‘keyTimes’ attributes, the‘keyPoints’ attribute overrides‘path’, which overrides‘values’, which overrides‘from’,‘by’ and‘to’.

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

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

Example animMotion01 shows a triangle moving along a motion path.

<?xml version="1.0" standalone="no"?><svg width="5cm" height="3cm"  viewBox="0 0 500 300"     xmlns="http://www.w3.org/2000/svg">  <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 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 href="#path1"/>    </animateMotion>  </path></svg>

Example animMotion01

At zero seconds

At three seconds

At six seconds

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

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

Example animMotion01 time slices

	After 0s	After 3s	After 6s
Supplemental transform due to movement along motion path	translate(100,250)	translate(250,100)	translate(400,250)
Supplemental transform due torotate="auto"	rotate(-90)	rotate(0)	rotate(90)

For a list of elements that can be animated using the‘animateMotion’element, seeElements,attributes and properties that can be animated.

2.17. The‘animateTransform’ element

The‘animateTransform’ element animates a transformation attributeon a target element, thereby allowing animations to control translation,scaling, rotation and/or skewing.

This section should talk about thetransform property.

Attribute definitions:

Name	Value	Initial value	Animatable
type	translate | scale | rotate | skewX | skewY	translate	no

Indicates the type of transformation which is to have its values change over time.

The‘from’,‘by’ and‘to’ attributes take a valueexpressed using the same syntax that is available for the given transformationtype:

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

(SeeThe ‘transform’ property.)

The‘values’ attribute for the‘animateTransform’ elementconsists of a semicolon-separated list of values, where each individual valueis expressed as described above for‘from’,‘by’ and‘to’.

The animation effect for‘animateTransform’ is post-multiplied to theunderlying value for additive‘animateTransform’ animations (see below)instead of added to the underlying value, due to the specific behavior of‘animateTransform’.

From-to,from-by andby animations are definedin SMIL to be equivalent to a correspondingvalues animation. SeetheAnimation function valuessection of SMIL Animation ([SMILANIM], section 3.2.2).However,to animations are a mixture of additive and non-additivebehavior, as described in theHowfrom, to and by attributes affect additive behavior section of SMILAnimation ([SMILANIM], section 3.3.6).To animations provide specific functionality to get a smoothchange from the underlying value to the‘to’ attribute value, whichconflicts mathematically with the requirement for additive transformanimations to be post-multiplied. As a consequence, in SVG 1.1 the behavior ofto animations for‘animateTransform’ is undefined. Authorsare suggested to usefrom-to,from-by,by orvalues animations to achieve any desired transform animation.

If‘calcMode’has the value'paced', then the "distance" for the transformation iscalculated as further described inPaced animations and complex types.

When an animation is active, the effect of non-additive‘animateTransform’ (i.e.,additive="replace")is to replace the given attribute's value with the transformation defined bythe‘animateTransform’. The effect of additive (i.e.,additive="sum") is to post-multiply thetransformation matrix corresponding to the transformation defined by this‘animateTransform’.

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

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

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

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

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

When a transform animation hasaccumulate='sum',the accumulation that occurs for each completed repetition of the animationis computed on the values specified in the‘animateTransform’ element'sanimation value attributes (i.e.,‘values’,‘from’,‘to’ and‘by’) and not on thetransformation matrix that these values represent.

For example, in the followingcode snippet, 3 is added to the scale value at the start of each repetition:

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

The following graph and table shows the animatedtransform value onthe‘rect’ over the course of the animation:

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

Transform item types that can have multiple values –'translate','scale' and'rotate' – aretreated as vectors and accumulation is performed with vector addition. Optional values thatare omitted are taken to have their usual implied value:1 forthe<sy> component of a'scale'and0 for the<tx> componentof a'translate' and the<cx cy>components of a'rotate'.

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

For a list of attributes and properties that can be animated using the‘animateTransform’ element, seeElements, attributes and properties that can be animated.

2.18. Elements, attributes and properties that can be animated

The following lists all of the elements which can be animated by an‘animateMotion’ element:

• ‘svg’
• ‘g’
• ‘defs’
• ‘use’
• ‘image’
• ‘switch’
• ‘path’
• ‘rect’
• ‘circle’
• ‘ellipse’
• ‘line’
• ‘polyline’
• ‘polygon’
• ‘text’
• ‘clipPath’
• ‘mask’
• ‘a’
• ‘foreignObject’

Each attribute or property within this specificationindicates whether or not it can be animated by SVG's animationelements. Animatable attributes and properties are designatedas follows:

Animatable: yes.

whereas attributes and properties that cannot be animated are designated:

Animatable: no.

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

Animatable: yes (non-additive).

SVG has a number of different data types usedfor its various supported attributes and properties. For thoseattributes and properties that can be animated, the followingtable indicates which animation elements can be used to animateeach of the basic data types. If a given attribute or propertycan take values of keywords (which are not additive) or numericvalues (which are additive), then additive animations arepossible if the subsequent animation uses a numeric value evenif the base animation uses a keyword value; however, if thesubsequent animation uses a keyword value, additive animationis not possible.

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

2.19. Implicit ARIA Semantics

3. Animation using the SVG DOM

Example dom01 shows a simple animationusing the DOM.

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

Example dom01

At zero seconds

At 2.5 seconds

At five seconds

Viewthis example as SVG (SVG-enabled browsers only)

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

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

If scripts are modifying the same attributes or propertiesthat are being animated by SVG'sanimation elements,the scripts modify the base value for the animation. If a basevalue is modified while an animation element is animating thecorresponding attribute or property, the animations arerequired to adjust dynamically to the new base value.

If a script is modifying a property on the override stylesheet at the same time that ananimation element isanimating that property, the result isimplementation-dependent; thus, it is recommended that this beavoided.

4. Extensions to SVG 2

4.1. Extensions to the‘svg’ element

Attribute definitions:

Name	Value	Initial value	Animatable
playbackorder	forwardonly | all	all	no

Indicates whether it is possible to seek backwards in the document. In earlier versions of SVG there was no need to put restrictions on the direction of seeking but with the newly introduced facilities for long-running documents (e.g. the‘discard’ element) there is sometimes a need to restrict this.

If‘playbackorder’ is set to'forwardonly', the content will likely contain‘discard’ elements or scripts that destroy resources, thus seeking back in the document fragment's timeline may result in missing content. If‘playbackorder’ is'forwardonly', the content should not provide a way, through hyperlinking or script, of seeking backwards in the timeline. Similarly the UA should disable any controls it may provide in the user interface for seeking backwards. Content withplaybackorder="forwardonly" that provides a mechanism for seeking backwards in time may result in undefined behavior or a document that is in error.

Can't we define this so that there is no undefined behavior?

Attribute values have the following meanings:

'forwardonly'

This file is intended to be played only in the forward direction, sequentially, therefore seeking backwards should not be allowed.

'all'

Indicates that the document is authored appropriately for seeking in both directions.

Name	Value	Initial value	Animatable
timelinebegin	loadend | loadbegin	loadend	no

Controls the initialization of the timeline for theSVG document fragment.

Theoutermost svg element of anSVG document fragment defines atimeline. Absolute times used byanimation elements in anSVG document fragment are relative to the document fragment'stimeline.

By default, thetimeline is initialized when the document fragment'sload event is fired but for progressively loaded animations, the author may set this attribute to'loadend', thus allowing the timeline to begin as the document loads, rather than waiting until the complete document is loaded.

Attribute values have the following meanings:

'loadend'

The document fragment's timeline starts the moment theload event for theoutermost svg element is triggered.

'loadbegin'

The document's timeline starts at the moment theoutermost svg element'sstart-tag (as defined inXML 1.0 [XML10] orHTML [HTML] when using the HTML parser) is fully parsed.

4.2. Extensions to conditional processing elements

5. IDL

Below are the DOM interfaces for the elements defined in this chapter.In addition,TimeEvent, which isfromSMIL Animation,is included here for easy reference.

5.1. Interface TimeEvent

TheTimeEventinterface, defined inSMIL Animation: Supported interfaces, provides specificcontextual information associated with Time events.

The different types of events that can occur are:

beginEvent

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

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

endEvent

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

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

repeatEvent

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

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

[Exposed=Window]interfaceTimeEvent :Event {  readonly attributeWindowProxy?view;  readonly attribute longdetail;  undefinedinitTimeEvent(DOMString typeArg,Window? viewArg, long detailArg);};

Attributes:

view (readonlyWindowProxy?)

Theview attribute identifies theWindow from which the event was generated.

detail (readonly long)

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

Operations:

undefinedinitTimeEvent(DOMStringtypeArg,Window?viewArg, longdetailArg)

TheinitTimeEvent method is used to initialize the value of aTimeEvent created withdocument.createEvent(). This method may only be called before theTimeEvent has been dispatched via the dispatchEvent method, though it may be called multiple times during that phase if necessary. If called multiple times, the final invocation takes precedence.

Parameters

1. DOMStringtypeArg
   Specifies the event type.
2. Window?viewArg
   Specifies the Event'sWindow.
3. longdetailArg
   Specifies the Event's detail.

5.2. Interface SVGAnimationElement

TheSVGAnimationElement interface is the base interface for allof the animation element interfaces:SVGAnimateElement,SVGSetElement,SVGAnimateMotionElement andSVGAnimateTransformElement.

Unlike other SVG DOM interfaces, the SVG DOM does not specifyconvenience DOM properties corresponding to the various languageattributes on SVG's animation elements. Specification of theseconvenience properties in a way that will be compatible with futureversions of SMIL Animation is expected in a future version of SVG. Thecurrent method for accessing and modifying the attributes on theanimation elements is to use the standardgetAttribute,setAttribute,getAttributeNS andsetAttributeNS defined inDOM4[DOM4].

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

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

If a DOM method call is made to begin or end the element (usingbeginElement(),beginElementAt(),endElement() orendElementAt()), each method callcreates a single instance time (in the appropriate instance times list).These times are then interpreted as part of the semantics of lists oftimes, as described inEvaluation of begin and end time lists.

• The instance time associated with abeginElement() orendElement() call is the current presentation time at the time of the DOM method call.
• The instance time associated with abeginElementAt() orendElementAt() call is the current presentation time at the time of the DOM method call, plus or minus the specified offset.
• Note thatbeginElement() is subject to the‘restart’ attribute in the same manner that event-based begin timing is. Refer also toSMIL Animation: Restarting animation ([SMILANIM], section 3.3.7).

[Exposed=Window]interfaceSVGAnimationElement :SVGElement {  readonly attributeSVGElement?targetElement;  attributeEventHandleronbegin;  attributeEventHandleronend;  attributeEventHandleronrepeat;  floatgetStartTime();  floatgetCurrentTime();  floatgetSimpleDuration();  undefinedbeginElement();  undefinedbeginElementAt(float offset);  undefinedendElement();  undefinedendElementAt(float offset);};SVGAnimationElement includesSVGTests;

Attributes:

targetElement (readonlySVGElement?)

The element which is being animated. If no target element is being animated (for example, because the URL in 'animate/href' does not match a valid element) the value returned is null.

onbegin (EventHandler)

The event handler for thebeginEvent.

onend (EventHandler)

The event handler for theendEvent.

onrepeat (EventHandler)

The event handler for therepeatEvent.

Operations:

floatgetStartTime()

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

Returns

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

Exceptions

DOMException, code INVALID_STATE_ERR

The animation element does not have a current interval.

floatgetCurrentTime()

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

Returns

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

floatgetSimpleDuration()

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

Returns

number of seconds for the simple duration for this animation.

Exceptions

DOMException, code NOT_SUPPORTED_ERR

The simple duration is not determined on the given element.

undefinedbeginElement()

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

undefinedbeginElementAt(floatoffset)

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

Parameters

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

undefinedendElement()

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

undefinedendElementAt(floatoffset)

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

Parameters

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

5.3. Interface SVGAnimateElement

TheSVGAnimateElement interface corresponds to the‘animate’element.

Object-oriented access to the attributes of the‘animate’ elementvia the SVG DOM is not available.

[Exposed=Window]interfaceSVGAnimateElement :SVGAnimationElement {};

5.4. Interface SVGSetElement

TheSVGSetElement interface corresponds to the‘set’element.

Object-oriented access to the attributes of the‘set’ elementvia the SVG DOM is not available.

[Exposed=Window]interfaceSVGSetElement :SVGAnimationElement {};

5.5. Interface SVGAnimateMotionElement

TheSVGAnimateMotionElement interface corresponds to the‘animateMotion’ element.

Object-oriented access to the attributes of the‘animateMotion’element via the SVG DOM is not available.

[Exposed=Window]interfaceSVGAnimateMotionElement :SVGAnimationElement {};

5.6. Interface SVGMPathElement

TheSVGMPathElement interface corresponds to the‘mpath’element.

[Exposed=Window]interfaceSVGMPathElement :SVGElement {};SVGMPathElement includesSVGURIReference;

5.7. Interface SVGAnimateTransformElement

TheSVGAnimateTransformElement interface corresponds to the‘animateTransform’ element.

Object-oriented access to the attributes of the‘animateTransform’ element via the SVG DOM is not available.

[Exposed=Window]interfaceSVGAnimateTransformElement :SVGAnimationElement {};

5.8. Interface SVGDiscardElement

TheSVGDiscardElement interface corresponds to the‘discard’element.

Object-oriented access to the attributes of the‘discard’ elementvia the SVG DOM is not available.

[Exposed=Window]interfaceSVGDiscardElement :SVGAnimationElement {};

5.9. Extensions to interface SVGSVGElement

partial interfaceSVGSVGElement {  undefinedpauseAnimations();  undefinedunpauseAnimations();  booleananimationsPaused();  floatgetCurrentTime();  undefinedsetCurrentTime(float seconds);};

ThepauseAnimationsandunpauseAnimationsmethods are used to pause and unpause all of the animations withintheSVG document fragment.

When pauseAnimations() is called, the following steps are run:

1. If the current‘svg’ element is not theoutermost svg element, then return.
2. Pause the timeline that controls SVG animations for theSVG document fragment that the‘svg’ element is in.

When unpauseAnimations() is called, the following steps are run:

1. If the current‘svg’ element is not theoutermost svg element, then return.
2. Unpause the timeline that controls SVG animations for theSVG document fragment that the‘svg’ element is in.

ThepauseAnimationsandunpauseAnimationsmethods only affect animations defined using SVG'sanimation elements.They have no effect on CSS Transitions or Animations[CSS3ANIMATIONS][CSS3TRANSITIONS]or animations created using script.

TheanimationsPausedmethod returns whether SVG animation timeline has been paused.When animationsPaused() is called, true is returned if the timeline thatcontrols SVG animations for theSVG document fragment that the‘svg’ element in has been paused bypauseAnimations;otherwise, false is returned.

ThegetCurrentTime andsetCurrentTime methodsare used to get and set the current time of the timeline that controlsSVG animations. When getCurrentTime() is called, the following steps are run:

1. If the timeline for thecurrent SVG document fragment has not yet begun, then return 0.

   This is the case, for example, if theoutermost svg element has its‘timelinebegin’ attribute set to'loadend' and the load event has not yet fired.

2. Otherwise, the timeline for thecurrent SVG document fragment has begun. Return the current time in seconds relative to the start time of the timeline.

When setCurrentTime(seconds) is called, the following steps are run:

1. If the current‘svg’ element is not theoutermost svg element, then return.
2. If the timeline for thecurrent SVG document fragment has begun, then the timeline's current time (in seconds, relative to the start time of the timeline) is set toseconds.
3. Otherwise, the timeline has not begun.seconds is recorded on thecurrent SVG document fragment as the time to be seeked to once the timeline has begun. If multiple calls tosetCurrentTime are made before the timeline has begun, the most recent call's time will be used to seek the timeline once it begins.

6. References

6.1. Normative references

[DOM2VIEWS]

Document Object Model (DOM) Level 2 Views Specification, A. Le Hors, L. Cable, eds. World Wide Web Consortium, 13 November 2000.
This edition of DOM 2 Views is http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113/.
Thelatest edition of DOM 2 Views is available at http://www.w3.org/TR/DOM-Level-2-Views/.

[DOM4]

DOM4, A. van Kesteren, A. Gregor, Ms2ger, A. Russell, R. Berjon, eds. World Wide Web Consortium, 04 February 2014.
This edition of DOM4 is http://www.w3.org/TR/2014/WD-dom-20140204/.
Thelatest edition of DOM4 is available at http://www.w3.org/TR/dom/.

[HTML]

HTML5 A vocabulary and associated APIs for HTML and XHTML, I. Hickson, R. Berjon, S. Faulkner, T. Leithead, E.D. Navara, E. O'Connor, S. Pfeiffer, eds. World Wide Web Consortium, 28 October 2014. W3C Recommendation.
This edition of HTML5 ishttp://www.w3.org/TR/2014/REC-html5-20141028/.
Thelatest version of html is available athttp://www.w3.org/TR/html/.

[ISO8601]

Data elements and interchange formats - Information interchange - Representation of dates and times, International Organization for Standardization, 2004. Available at http://www.iso.org/iso/catalogue_detail?csnumber=40874.

[RFC2119]

Key words for use in RFCs to Indicate Requirement Levels, S. Bradner, March 1997.
Available at http://tools.ietf.org/html/rfc2119.

[SMIL]

Synchronized Multimedia Integration Language (SMIL 3.0), D. Bultermanet al., eds. 01 December 2008.
This edition of SMIL is http://www.w3.org/TR/2008/REC-SMIL3-20081201/.
Thelatest edition of SMIL is available at http://www.w3.org/TR/smil/.

[SMILANIM]

SMIL Animation, P. Schmitz, A. Cohen. World Wide Web Consortium, 04 September 2001.
This edition of SMIL Animation is http://www.w3.org/TR/2001/REC-smil-animation-20010904/.
Thelatest edition of SMIL Animation is available at http://www.w3.org/TR/smil-animation/.

[SRGB]

IEC 61966-2-1/Amd 1:2003 : Multimedia systems and equipment — Colour measurement and management — Part 2-1: Colour management — Default RGB colour space — sRGB, International Electrotechnical Commission, 2003.
Available athttps://webstore.iec.ch/publication/6168.
See alsohttp://www.color.org/chardata/rgb/srgb.xalter for technical data and color profiles.

[SVG2]

Scalable Vector Graphics (SVG) 2, N. Andronikos, T. Bah, A. Bellamy-Royds, B. Birtles, C. Concolato, E. Dahlström, C. Lilley, C. McCormack, D. Schepers, D. Schulze, R. Schwerdtfeger, S. Takagi, J. Watt, eds. World Wide Web Consortium, 09 April 2015.
This edition of SVG 2 is http://www.w3.org/TR/2015/WD-SVG2-20150409/.
Thelatest edition of SVG 2 is available at http://www.w3.org/TR/SVG2/.

[XML10]

Extensible Markup Language (XML) 1.0 (Fifth Edition), T. Bray, J. Paoli, C. M. Sperberg-McQueen, E. Maler, F. Yergeau, eds. World Wide Web Consortium, 26 November 2008.
This edition of XML 1.0 is http://www.w3.org/TR/2008/REC-xml-20081126/.
Thelatest edition of XML 1.0 is available at http://www.w3.org/TR/xml/.

6.2. Non-normative references

[CSS3ANIMATIONS]

CSS Animations, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. D. Baron, eds. World Wide Web Consortium, 3 April 2012. W3C Working Draft. (Work in progress.)
This edition of CSS Animations is http://www.w3.org/TR/2012/WD-css-animations-1-20120403/.
Thelatest edition of CSS Animations is available at http://www.w3.org/TR/css-animations-1/.

[CSS3TRANSITIONS]

CSS Transitions, D. Jackson, D. Hyatt, C. Marrin, L. D. Baron, eds. World Wide Web Consortium, 3 April 2012. W3C Working Draft. (Work in progress.)
This edition of CSS Transitions is http://www.w3.org/TR/2012/WD-css-transitions-1-20120403/.
Thelatest edition of CSS Transitions is available at http://www.w3.org/TR/css-transitions-1/.

[FOLEY-VANDAM]

Computer Graphics: Principles and Practice, Second Edition, J. D. Foley, A. van Dam, S. K. Feiner, J. F. Hughes, R. L. Phillips. Addison-Wesley, 1995.

7. Changes since SVG 1.1 Second Edition

• Removed theattributeType attribute.
• Folded the ElementTimeControl interface intoSVGAnimationElement.
• Removed theanimateColor element.
• Added the onbegin, onend and onrepeat attributes to theSVGAnimationElement interface.
• The‘values’,‘keyTimes’ and‘keySplines’ attributes now ignore the last semicolon separator if it's not followed by a value.
• Allowed the‘mpath’ element to refer to ashape element.
• Added the‘discard’ element
• Added the‘timelinebegin’ and‘playbackorder’ attributes on the‘svg’ element.