--- a/master/animate.html Thu May 17 15:26:24 2012 +1000
+++ b/master/animate.html Thu May 17 15:41:07 2012 +1000
@@ -16,69 +16,74 @@
<h2 id="Introduction">Introduction</h2>
- <p>Because the Web is a dynamic medium, SVG supports the
- ability to change vector graphics over time. SVG content can be
- animated in the following ways:</p>
- <ul>
- <li>Using SVG's <a href="#AnimationElements">animation elements</a>.
- SVG document fragments can describe time-based modifications
- to the document's elements. Using the various animation
- elements, you can define motion paths, fade-in or fade-out
- effects, and objects that grow, shrink, spin or change
- color.</li>
- <li>Using the <a href="svgdom.html">SVG DOM</a>. The SVG DOM
- conforms to key aspects of the <a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/"><cite>Document Object Model (DOM)
- Level 1</cite></a> [<a
- href="refs.html#ref-DOM1">DOM1</a>] and
- <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/"><cite>Document Object Model (DOM) Level 2</cite></a>
- [<a href="refs.html#ref-DOM2">DOM2</a>]
- specifications. Every attribute and style sheet setting is
- accessible to scripting, and SVG offers a set of additional
- DOM interfaces to support efficient animation via scripting.
- As a result, virtually any kind of animation can be achieved.
- The timer facilities in scripting languages such as
- ECMAScript can be used to start up and control the
- animations [<a href="refs.html#ref-ECMA-262">ECMA-262</a>].
- (See <a href="#DOMAnimationExample">example</a> below.)</li>
- <li>SVG has been designed to allow
- <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">SMIL</a> [<a href="refs.html#ref-SMIL">SMIL</a>] to use
- animated or static SVG content as media components.</li>
- </ul>
+<p>Because the Web is a dynamic medium, SVG supports the
+ability to change vector graphics over time. SVG content can be
+animated in the following ways:</p>
+
+<ul>
+ <li>Using SVG's <a href="#AnimationElements">animation elements</a>.
+ SVG document fragments can describe time-based modifications
+ to the document's elements. Using the various animation
+ elements, you can define motion paths, fade-in or fade-out
+ effects, and objects that grow, shrink, spin or change color.</li>
+
+ <li>Using the <a href="svgdom.html">SVG DOM</a>. The SVG DOM
+ conforms to key aspects of the <a href="http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/"><cite>Document Object Model (DOM)
+ Level 1</cite></a> [<a href="refs.html#ref-DOM1">DOM1</a>] and
+ <a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/"><cite>Document Object Model (DOM) Level 2</cite></a>
+ [<a href="refs.html#ref-DOM2">DOM2</a>]
+ specifications. Every attribute and style sheet setting is
+ accessible to scripting, and SVG offers a set of additional
+ DOM interfaces to support efficient animation via scripting.
+ As a result, virtually any kind of animation can be achieved.
+ The timer facilities in scripting languages such as
+ ECMAScript can be used to start up and control the
+ animations [<a href="refs.html#ref-ECMA-262">ECMA-262</a>].
+ (See <a href="#DOMAnimationExample">example</a> below.)</li>
+
+ <li>SVG has been designed to allow
+ <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/">SMIL</a> [<a href="refs.html#ref-SMIL">SMIL</a>] to use
+ animated or static SVG content as media components.</li>
+</ul>
<h2 id="AnimationElements">Animation elements</h2>
<h3 id="AnimationElementsIntro">Overview</h3>
- <p>SVG's animation elements were developed in collaboration
- with the W3C Synchronized Multimedia (SYMM) Working Group,
- developers of the <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized Multimedia Integration Language
- (SMIL) 3.0 Specification</cite></a> [<a href="refs.html#ref-SMIL">SMIL</a>].</p>
- <p>The SYMM Working Group, in collaboration with the SVG
- Working Group, has authored the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation specification</cite></a>
- [<a href="refs.html#ref-SMILANIM">SMILANIM</a>],
- which represents a general-purpose XML animation feature set.
- SVG incorporates the animation features defined in the SMIL
- Animation specification and provides some SVG-specific
- extensions.</p>
- <p>For an introduction to the approach and features available
- in any language that supports SMIL Animation, see
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationFramework">SMIL Animation overview</a>
- and <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">SMIL Animation animation model</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], sections 2 and 3). For the list of animation
- features which go beyond SMIL Animation, see
- <a href="animate.html#SVGExtensionsToSMILAnimation">SVG extensions to SMIL Animation</a>.</p>
+<p>SVG's animation elements were developed in collaboration
+with the W3C Synchronized Multimedia (SYMM) Working Group,
+developers of the <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/"><cite>Synchronized Multimedia Integration Language
+(SMIL) 3.0 Specification</cite></a> [<a href="refs.html#ref-SMIL">SMIL</a>].</p>
+
+<p>The SYMM Working Group, in collaboration with the SVG
+Working Group, has authored the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation specification</cite></a>
+[<a href="refs.html#ref-SMILANIM">SMILANIM</a>],
+which represents a general-purpose XML animation feature set.
+SVG incorporates the animation features defined in the SMIL
+Animation specification and provides some SVG-specific
+extensions.</p>
+
+<p>For an introduction to the approach and features available
+in any language that supports SMIL Animation, see
+<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationFramework">SMIL Animation overview</a>
+and <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">SMIL Animation animation model</a>
+([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], sections 2 and 3). For the list of animation
+features which go beyond SMIL Animation, see
+<a href="animate.html#SVGExtensionsToSMILAnimation">SVG extensions to SMIL Animation</a>.</p>
<h3 id="RelationshipToSMILAnimation">Relationship to SMIL Animation</h3>
- <p>SVG is a host language in terms of SMIL Animation and
- therefore introduces additional constraints and features as
- permitted by that specification. Except for any SVG-specific
- rules explicitly mentioned in this specification, the normative
- definition for SVG's animation elements and attributes is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>].</p>
- <p>SVG supports the following four animation elements which are
- defined in the SMIL Animation specification:</p>
+<p>SVG is a host language in terms of SMIL Animation and
+therefore introduces additional constraints and features as
+permitted by that specification. Except for any SVG-specific
+rules explicitly mentioned in this specification, the normative
+definition for SVG's animation elements and attributes is the
+<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>].</p>
+
+<p>SVG supports the following four animation elements which are
+defined in the SMIL Animation specification:</p>
+
<table class='vert offset' summary="animation elements from SMIL Animation">
<tr>
<td><a>'animate'</a></td>
@@ -102,180 +107,190 @@
</tr>
</table>
- <p>Although SVG defines <a>'animateColor'</a>, its use is deprecated in
- favor of simply using the <a>'animate'</a> element to target properties
- that can take color values.</p>
+<p>Although SVG defines <a>'animateColor'</a>, its use is deprecated in
+favor of simply using the <a>'animate'</a> element to target properties
+that can take color values.</p>
- <p id="SVGExtensionsToSMILAnimation">Additionally, SVG includes the following compatible
- extensions to SMIL Animation:</p>
- <table class='vert offset' summary="extensions to SMIL Animation">
- <tr>
- <td><a>'animateTransform'</a></td>
- <td>modifies one of SVG's transformation attributes over
- time, such as the <a>'transform'</a> attribute</td>
- </tr>
- <tr>
- <td><a>'animateMotion/path'</a> attribute</td>
- <td>SVG allows any feature from SVG's <a
- href="paths.html#PathData">path data</a> syntax to be
- specified in a <a>'animateMotion/path'</a> attribute to the <a>'animateMotion'</a> element
- (SMIL Animation only allows a subset of SVG's path data
- syntax within a <a>'animateMotion/path'</a> attribute)</td>
- </tr>
- <tr>
- <td><a>'mpath'</a> element</td>
- <td>SVG allows an <a>'animateMotion'</a> element to
- contain a child <a>'mpath'</a> element which
- references an SVG <a>'path'</a> element as the
- definition of the motion path</td>
- </tr>
- <tr>
- <td><a>'animateMotion/keyPoints'</a> attribute</td>
- <td>SVG adds a <a>'animateMotion/keyPoints'</a> attribute to the <a>'animateMotion'</a> to provide
- precise control of the velocity of motion path
- animations</td>
- </tr>
- <tr>
- <td><a>'animateMotion/rotate'</a> attribute</td>
- <td>SVG adds a <a>'animateMotion/rotate'</a> attribute to the <a>'animateMotion'</a> 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</td>
- </tr>
- </table>
- <p>For compatibility with other aspects of the language, SVG
- uses <a href="linking.html#IRIReference">IRI references</a> via
- an <a>'set/xlink:href'</a> attribute to identify
- the elements which are to be targets of the animations,
- as allowed in SMIL 3.0.</p>
- <p>SMIL Animation requires that the host language define the
- meaning for <em id='DocumentBegin'>document begin</em> and the
- <em id='DocumentEnd'>document end</em>. Since an
- <a>'svg'</a> is sometimes the root of
- the XML document tree and other times can be a component of a
- parent XML grammar, the document begin for a given SVG
- document fragment is defined to be the exact time at which the
- <a>'svg'</a> element's <a href="interact.html#LoadEvent">SVGLoad event</a> is
- triggered. The document end of an SVG document
- fragment is the point at which the document fragment has been
- released and is no longer being processed by the user agent.
- However, nested <a>'svg'</a> elements within an SVG
- document do not constitute document fragments in this sense,
- and do not define a separate document begin; all times within
- the nested SVG fragment are relative to the document time
- defined for the root <a>'svg'</a> element.</p>
- <p>For SVG, the term <dfn id="PresentationTime">presentation time</dfn>
- indicates the position in the timeline relative
- to the document begin of a given document
- fragment.</p>
- <p>SVG defines more constrained error processing than is
- defined in the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>].
- SMIL Animation defines error processing behavior
- where the document continues to run in certain error
- situations, whereas all animations within an SVG document
- fragment will stop in the event of any error within the
- document (see <a href="implnote.html#ErrorProcessing">Error
- processing</a>).</p>
+<p id="SVGExtensionsToSMILAnimation">Additionally, SVG includes the following compatible
+extensions to SMIL Animation:</p>
+
+<table class='vert offset' summary="extensions to SMIL Animation">
+ <tr>
+ <td><a>'animateTransform'</a></td>
+ <td>modifies one of SVG's transformation attributes over
+ time, such as the <a>'transform'</a> attribute</td>
+ </tr>
+ <tr>
+ <td><a>'animateMotion/path'</a> attribute</td>
+ <td>SVG allows any feature from SVG's <a
+ href="paths.html#PathData">path data</a> syntax to be
+ specified in a <a>'animateMotion/path'</a> attribute to the <a>'animateMotion'</a> element
+ (SMIL Animation only allows a subset of SVG's path data
+ syntax within a <a>'animateMotion/path'</a> attribute)</td>
+ </tr>
+ <tr>
+ <td><a>'mpath'</a> element</td>
+ <td>SVG allows an <a>'animateMotion'</a> element to
+ contain a child <a>'mpath'</a> element which
+ references an SVG <a>'path'</a> element as the
+ definition of the motion path</td>
+ </tr>
+ <tr>
+ <td><a>'animateMotion/keyPoints'</a> attribute</td>
+ <td>SVG adds a <a>'animateMotion/keyPoints'</a> attribute to the <a>'animateMotion'</a> to provide
+ precise control of the velocity of motion path
+ animations</td>
+ </tr>
+ <tr>
+ <td><a>'animateMotion/rotate'</a> attribute</td>
+ <td>SVG adds a <a>'animateMotion/rotate'</a> attribute to the <a>'animateMotion'</a> 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</td>
+ </tr>
+</table>
+
+<p>For compatibility with other aspects of the language, SVG
+uses <a>IRI references</a> via an <a>'set/xlink:href'</a> attribute to
+identify the elements which are to be targets of the animations,
+as allowed in SMIL 3.0.</p>
+
+<p>SMIL Animation requires that the host language define the
+meaning for <em id='DocumentBegin'>document begin</em> and the
+<em id='DocumentEnd'>document end</em>. Since an
+<a>'svg'</a> is sometimes the root of
+the XML document tree and other times can be a component of a
+parent XML grammar, the document begin for a given SVG
+document fragment is defined to be the exact time at which the
+<a>'svg'</a> element's <a href="interact.html#LoadEvent">SVGLoad event</a> is
+triggered. The document end of an SVG document
+fragment is the point at which the document fragment has been
+released and is no longer being processed by the user agent.
+However, nested <a>'svg'</a> elements within an SVG
+document do not constitute document fragments in this sense,
+and do not define a separate document begin; all times within
+the nested SVG fragment are relative to the document time
+defined for the root <a>'svg'</a> element.</p>
+
+<p>For SVG, the term <dfn id="PresentationTime">presentation time</dfn>
+indicates the position in the timeline relative
+to the document begin of a given document
+fragment.</p>
+
+<p>SVG defines more constrained error processing than is
+defined in the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>].
+SMIL Animation defines error processing behavior
+where the document continues to run in certain error
+situations, whereas all animations within an SVG document
+fragment will stop in the event of any error within the
+document (see <a href="implnote.html#ErrorProcessing">Error
+processing</a>).</p>
<h3 id="AnimationElementsExample">Animation elements example</h3>
- <p id="ExampleAnim01"><span class="example-ref">Example anim01</span> below
- demonstrates each of SVG's five animation elements.</p>
+<p id="ExampleAnim01"><span class="example-ref">Example anim01</span> below
+demonstrates each of SVG's five animation elements.</p>
-<pre>
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="8cm" height="3cm" viewBox="0 0 800 300"
- xmlns="http://www.w3.org/2000/svg" version="1.1">
- <desc>Example anim01 - demonstrate animation elements</desc>
- <rect x="1" y="1" width="798" height="298"
- fill="none" stroke="blue" stroke-width="2" />
- <!-- The following illustrates the use of the 'animate' element
+<pre><![CDATA[
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="8cm" height="3cm" viewBox="0 0 800 300"
+ xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <desc>Example anim01 - demonstrate animation elements</desc>
+ <rect x="1" y="1" width="798" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+ <!-- The following illustrates the use of the 'animate' element
to animate a rectangles x, y, and width attributes so that
- the rectangle grows to ultimately fill the viewport. -->
- <rect id="RectElement" x="300" y="100" width="300" height="100"
- fill="rgb(255,255,0)" >
- <animate attributeName="x" attributeType="XML"
- begin="0s" dur="9s" fill="freeze" from="300" to="0" />
- <animate attributeName="y" attributeType="XML"
- begin="0s" dur="9s" fill="freeze" from="100" to="0" />
- <animate attributeName="width" attributeType="XML"
- begin="0s" dur="9s" fill="freeze" from="300" to="800" />
- <animate attributeName="height" attributeType="XML"
- begin="0s" dur="9s" fill="freeze" from="100" to="300" />
- </rect>
- <!-- Set up a new user coordinate system so that
+ the rectangle grows to ultimately fill the viewport. -->
+ <rect id="RectElement" x="300" y="100" width="300" height="100"
+ fill="rgb(255,255,0)" >
+ <animate attributeName="x" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="0" />
+ <animate attributeName="y" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="0" />
+ <animate attributeName="width" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="300" to="800" />
+ <animate attributeName="height" attributeType="XML"
+ begin="0s" dur="9s" fill="freeze" from="100" to="300" />
+ </rect>
+ <!-- Set up a new user coordinate system so that
the text string's origin is at (0,0), allowing
- rotation and scale relative to the new origin -->
- <g transform="translate(100,100)" >
- <!-- The following illustrates the use of the 'set', 'animateMotion',
+ rotation and scale relative to the new origin -->
+ <g transform="translate(100,100)" >
+ <!-- The following illustrates the use of the 'set', 'animateMotion',
'animate' and 'animateTransform' elements. The 'text' element
below starts off hidden (i.e., invisible). At 3 seconds, it:
* becomes visible
* continuously moves diagonally across the viewport
* changes color from blue to dark red
* rotates from -30 to zero degrees
- * scales by a factor of three. -->
- <text id="TextElement" x="0" y="0"
- font-family="Verdana" font-size="35.27" visibility="hidden" >
+ * scales by a factor of three. -->
+ <text id="TextElement" x="0" y="0"
+ font-family="Verdana" font-size="35.27" visibility="hidden" >
It's alive!
- <set attributeName="visibility" attributeType="CSS" to="visible"
- begin="3s" dur="6s" fill="freeze" />
- <animateMotion path="M 0 0 L 100 100"
- begin="3s" dur="6s" fill="freeze" />
- <animate attributeName="fill" attributeType="CSS"
+ <set attributeName="visibility" attributeType="CSS" to="visible"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateMotion path="M 0 0 L 100 100"
+ begin="3s" dur="6s" fill="freeze" />
+ <animate attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)"
- begin="3s" dur="6s" fill="freeze" />
- <animateTransform attributeName="transform" attributeType="XML"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-30" to="0"
- begin="3s" dur="6s" fill="freeze" />
- <animateTransform attributeName="transform" attributeType="XML"
+ begin="3s" dur="6s" fill="freeze" />
+ <animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
- begin="3s" dur="6s" fill="freeze" />
- </text>
- </g>
-</svg>
-</pre>
- <table summary="Example anim01">
- <caption align="bottom">
- Example anim01
- </caption>
- <tr>
- <td width="256"><img width="256" height="91"
- alt="Example anim01 - at zero seconds"
- src="images/animate/anim01a.png" /> <span
- class="table-heading-1">At zero seconds</span></td>
- <td width="20"> </td>
- <td width="256"><img width="256" height="91"
- alt="Example anim01 - at three seconds"
- src="images/animate/anim01b.png" /> <span
- class="table-heading-1">At three seconds</span></td>
- </tr>
- <tr>
- <td width="256"><img width="256" height="91"
- alt="Example anim01 - at six seconds"
- src="images/animate/anim01c.png" /> <span
- class="table-heading-1">At six seconds</span></td>
- <td width="20"> </td>
- <td width="256"><img width="256" height="91"
- alt="Example anim01 - at nine seconds"
- src="images/animate/anim01d.png" /> <span
- class="table-heading-1">At nine seconds</span></td>
- </tr>
- </table>
- <p class="view-as-svg"><a href="images/animate/anim01.svg">View
- this example as SVG (SVG-enabled browsers only)</a></p>
- <p>The sections below describe the various animation attributes
- and elements.</p>
+ begin="3s" dur="6s" fill="freeze" />
+ </text>
+ </g>
+</svg>
+]]></pre>
+
+<!--
+ Would be good to replace this with an <edit:example>, if that
+ supported multiple images.
+ -->
+<table summary="Example anim01">
+ <caption align="bottom">
+ Example anim01
+ </caption>
+ <tr>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at zero seconds"
+ src="images/animate/anim01a.png" /> <span
+ class="table-heading-1">At zero seconds</span></td>
+ <td width="20"> </td>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at three seconds"
+ src="images/animate/anim01b.png" /> <span
+ class="table-heading-1">At three seconds</span></td>
+ </tr>
+ <tr>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at six seconds"
+ src="images/animate/anim01c.png" /> <span
+ class="table-heading-1">At six seconds</span></td>
+ <td width="20"> </td>
+ <td width="256"><img width="256" height="91"
+ alt="Example anim01 - at nine seconds"
+ src="images/animate/anim01d.png" /> <span
+ class="table-heading-1">At nine seconds</span></td>
+ </tr>
+</table>
+<p class="view-as-svg"><a href="images/animate/anim01.svg">View
+this example as SVG (SVG-enabled browsers only)</a></p>
+
+<p>The sections below describe the various animation attributes
+and elements.</p>
<edit:with element='animate'>
<h3 id="TargetElement">Attributes to identify the target element for an animation</h3>
- <p>The following attribute is common to all animation
- elements and identifies the target element for the animation.</p>
+<p>The following attribute is common to all animation
+elements and identifies the target element for the animation.</p>
<div class="adef-list">
<p><em>Attribute definitions:</em></p>
@@ -384,151 +399,142 @@
<h3 id="Animation.nsexample">Animation with namespaces</h3>
- <p id="ExampleNS01"><span class="example-ref">Example
- animns01</span> below shows a namespace prefix being resolved
- to a namespace name in the scope of the referencing element, and
- that namespace name being used (regardless of the prefix which
- happens to be used in the target scope) to identify the
- attribute being animated.</p>
- <edit:example href="images/animate/animns01.svg" link="yes" image="no"/>
- <h3 id="complexDistances">Paced animation and complex types</h3>
+<p id="ExampleNS01"><span class="example-ref">Example
+animns01</span> below shows a namespace prefix being resolved
+to a namespace name in the scope of the referencing element, and
+that namespace name being used (regardless of the prefix which
+happens to be used in the target scope) to identify the
+attribute being animated.</p>
+<edit:example href="images/animate/animns01.svg" link="yes" image="no"/>
+
+<h3 id="complexDistances">Paced animation and complex types</h3>
+
+<p>Paced animations assume a notion of distance between the various
+animation values defined by the
+<a>'to'</a>, <a>'from'</a>, <a>'by'</a> and <a>'values'</a>
+attributes. Distance is defined only for scalar types (such as
+<a href="types.html#DataTypeLength"><length></a>), colors
+and the subset of transformation types that are supported by
+<a>'animateTransform'</a>.
+In the list of distance functions below, V<sub>a</sub> and V<sub>b</sub>
+represent the two values the distance between which is being calculated.</p>
+
+<p>Since paced animation is intended to produce an animation with an even
+pace of change, it does not make sense to define distance functions
+for all data types. Distance can be usefully defined for types whose
+values are <var>n</var>-dimensional vectors (including scalars, which are
+1-dimensional vectors). For example, a
+<a href="types.html#DataTypeLength"><length></a> value is a scalar
+value, and a <a href="types.html#DataTypeColor"><color></a> value
+is a 3-dimensional vector. Thus attributes of these types can have paced
+animation applied to them. On the other hand, a
+<a href="types.html#DataTypeLengths"><list-of-length></a>
+(as used by <a href="painting.html#StrokeDasharrayProperty"><span class="property">'stroke-dasharray'</span></a>)
+is a list of scalars (1-dimensional vectors), and
+<a href="shapes.html#PointsBNF"><list-of-points></a> (as used by
+the <a href="shapes.html#PolygonElementPointsAttribute"><span class="attr-name">'points'</span></a>
+attribute on a <a href="shapes.html#PolygonElement"><span class="element-name">'polygon'</span></a>)
+is a list of 2-dimensional vectors. Therefore, these types do not have a
+distance function defined and cannot have paced animation applied to them.</p>
+
+<p>The distance functions for types that support paced animation are as follows:</p>
+
+<dl class='indented'>
+ <dt><a href="types.html#DataTypeCoordinate"><coordinate></a>,
+ <a href="types.html#DataTypeInteger"><integer></a>,
+ <a href="types.html#DataTypeLength"><length></a> and
+ <a href="types.html#DataTypeNumber"><number></a></dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = |V<sub>a</sub> − V<sub>b</sub>|</p>
<p>
- Paced animations assume a notion of distance between the various
- animation values defined by the
- <a>'to'</a>, <a>'from'</a>, <a>'by'</a> and <a>'values'</a>
- attributes. Distance is defined only for scalar types (such as
- <a href="types.html#DataTypeLength"><length></a>), colors
- and the subset of transformation types that are supported by
- <a>'animateTransform'</a>.
- In the list of distance functions below, V<sub>a</sub> and V<sub>b</sub>
- represent the two values the distance between which is being calculated.
+ Examples: animating the
+ <a>'rect/x'</a> attribute on a
+ <a>'rect'</a>, or the
+ <a>'stroke-width'</a>
+ property on a <a>'circle'</a>.
</p>
+ </dd>
+
+ <dt><a href="types.html#DataTypeColor"><color></a></dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.red − V<sub>b</sub>.red)<sup>2</sup> + (V<sub>a</sub>.green − V<sub>b</sub>.green)<sup>2</sup> + (V<sub>a</sub>.blue − V<sub>b</sub>.blue)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>V<sub><var>i</var></sub>.red is the red component of the V<sub><var>i</var></sub> color value,</div>
+ <div>V<sub><var>i</var></sub>.green is the green component of the V<sub><var>i</var></sub> color value, and</div>
+ <div>V<sub><var>i</var></sub>.blue is the blue component of the V<sub><var>i</var></sub> color value.</div>
+ </div>
<p>
- Since paced animation is intended to produce an animation with an even
- pace of change, it does not make sense to define distance functions
- for all data types. Distance can be usefully defined for types whose
- values are <var>n</var>-dimensional vectors (including scalars, which are
- 1-dimensional vectors). For example, a
- <a href="types.html#DataTypeLength"><length></a> value is a scalar
- value, and a <a href="types.html#DataTypeColor"><color></a> value
- is a 3-dimensional vector. Thus attributes of these types can have paced
- animation applied to them. On the other hand, a
- <a href="types.html#DataTypeLengths"><list-of-length></a>
- (as used by <a href="painting.html#StrokeDasharrayProperty"><span class="property">'stroke-dasharray'</span></a>)
- is a list of scalars (1-dimensional vectors), and
- <a href="shapes.html#PointsBNF"><list-of-points></a> (as used by
- the <a href="shapes.html#PolygonElementPointsAttribute"><span class="attr-name">'points'</span></a>
- attribute on a <a href="shapes.html#PolygonElement"><span class="element-name">'polygon'</span></a>)
- is a list of 2-dimensional vectors. Therefore, these types do not have a
- distance function defined and cannot have paced animation applied to them.
+ 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
+ [<a href='refs.html#ref-SRGB'>SRGB</a>]. Since
+ <a href="types.html#DataTypeColor"><color></a> values
+ may specify colors outside of the sRGB gamut, these component
+ values may lie outside the range [0, 1].
</p>
<p>
- The distance functions for types that support paced animation are as
- follows:
+ Example: animating the <a>'fill property'</a>
+ property on an <a>'ellipse'</a>.
</p>
- <dl class='indented'>
- <dt>
- <a href="types.html#DataTypeCoordinate"><coordinate></a>,
- <a href="types.html#DataTypeInteger"><integer></a>,
- <a href="types.html#DataTypeLength"><length></a> and
- <a href="types.html#DataTypeNumber"><number></a>
- </dt>
- <dd>
- <p>distance(V<sub>a</sub>, V<sub>b</sub>) = |V<sub>a</sub> − V<sub>b</sub>|</p>
- <p>
- Examples: animating the
- <a>'rect/x'</a> attribute on a
- <a>'rect'</a>, or the
- <a>'stroke-width'</a>
- property on a <a>'circle'</a>.
- </p>
- </dd>
- <dt>
- <a href="types.html#DataTypeColor"><color></a>
- </dt>
- <dd>
- <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.red − V<sub>b</sub>.red)<sup>2</sup> + (V<sub>a</sub>.green − V<sub>b</sub>.green)<sup>2</sup> + (V<sub>a</sub>.blue − V<sub>b</sub>.blue)<sup>2</sup>), where:</p>
- <div class='vardefs'>
- <div>V<sub><var>i</var></sub>.red is the red component of the V<sub><var>i</var></sub> color value,</div>
- <div>V<sub><var>i</var></sub>.green is the green component of the V<sub><var>i</var></sub> color value, and</div>
- <div>V<sub><var>i</var></sub>.blue is the blue component of the V<sub><var>i</var></sub> color value.</div>
- </div>
- <p>
- 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
- [<a href='refs.html#ref-SRGB'>SRGB</a>]. Since
- <a href="types.html#DataTypeColor"><color></a> values
- may specify colors outside of the sRGB gamut, these component
- values may lie outside the range [0, 1].
- </p>
- <p>
- Example: animating the <a>'fill property'</a>
- property on an <a>'ellipse'</a>.
- </p>
- </dd>
- <dt>
- Transform definitions of type <span class='attr-value'>'translate'</span>
- </dt>
- <dd>
- <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.tx − V<sub>b</sub>.tx)<sup>2</sup> + (V<sub>a</sub>.ty − V<sub>b</sub>.ty)<sup>2</sup>), where:</p>
- <div class='vardefs'>
- <div>V<sub><var>i</var></sub>.tx is the <var>x</var> component of the V<sub><var>i</var></sub> translation transform value, and</div>
- <div>V<sub><var>i</var></sub>.ty is the <var>y</var> component of the V<sub><var>i</var></sub> translation transform value.</div>
- </div>
- <p>
- Example (for all transform definition types): animating the <a>'transform'</a>
- attribute on a <a>'g'</a> using <a>'animateTransform'</a>.
- </p>
- </dd>
- <dt>
- Transform definitions of type <span class='attr-value'>'scale'</span>
- </dt>
- <dd>
- <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.sx − V<sub>b</sub>.sx)<sup>2</sup> + (V<sub>a</sub>.sy − V<sub>b</sub>.sy)<sup>2</sup>), where:</p>
- <div class='vardefs'>
- <div>V<sub><var>i</var></sub>.sx is the <var>x</var> component of the V<sub><var>i</var></sub> scale transform value, and</div>
- <div>V<sub><var>i</var></sub>.sy is the <var>y</var> component of the V<sub><var>i</var></sub> scale transform value.</div>
- </div>
- <p>
- Note that, as when specifying scale transformations in a
- <a href="types.html#DataTypeTransformList"><transform-list></a>, if the
- <var>y</var> component of the scale is omitted it is implicitly equal
- to the <var>x</var> component.
- </p>
- </dd>
- <dt>
- Transform definitions of type <span class='attr-value'>'rotate'</span>, <span class='attr-value'>'skewX'</span> and <span class='attr-value'>'skewY'</span>
- </dt>
- <dd>
- <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.angle − V<sub>b</sub>.angle)<sup>2</sup>), where:</p>
- <div class='vardefs'>
- <div>
- V<sub><var>i</var></sub>.angle is the angle component of the
- V<sub><var>i</var></sub> rotation or skew transform value.
- </div>
- </div>
- <p>
- 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.
- </p>
- </dd>
- </dl>
+ </dd>
+ <dt>Transform definitions of type <span class='attr-value'>'translate'</span></dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.tx − V<sub>b</sub>.tx)<sup>2</sup> + (V<sub>a</sub>.ty − V<sub>b</sub>.ty)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>V<sub><var>i</var></sub>.tx is the <var>x</var> component of the V<sub><var>i</var></sub> translation transform value, and</div>
+ <div>V<sub><var>i</var></sub>.ty is the <var>y</var> component of the V<sub><var>i</var></sub> translation transform value.</div>
+ </div>
<p>
- Distance functions for all other data types are not defined.
- If <span class='attr-value'>calcMode="paced"</span> is used on an
- animation of an attribute or property whose type is not one of
- those listed above, the animation effect is undefined.
- <a>SVG user agents</a> may choose to
- perform the animation as if <span class='attr-value'>calcMode="linear"</span>,
- but this is not required. Authors are recommended not to specify
- paced animation on types not listed above.
+ Example (for all transform definition types): animating the <a>'transform'</a>
+ attribute on a <a>'g'</a> using <a>'animateTransform'</a>.
</p>
+ </dd>
+
+ <dt>Transform definitions of type <span class='attr-value'>'scale'</span></dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.sx − V<sub>b</sub>.sx)<sup>2</sup> + (V<sub>a</sub>.sy − V<sub>b</sub>.sy)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>V<sub><var>i</var></sub>.sx is the <var>x</var> component of the V<sub><var>i</var></sub> scale transform value, and</div>
+ <div>V<sub><var>i</var></sub>.sy is the <var>y</var> component of the V<sub><var>i</var></sub> scale transform value.</div>
+ </div>
+ <p>
+ Note that, as when specifying scale transformations in a
+ <a href="types.html#DataTypeTransformList"><transform-list></a>, if the
+ <var>y</var> component of the scale is omitted it is implicitly equal
+ to the <var>x</var> component.
+ </p>
+ </dd>
+
+ <dt>Transform definitions of type <span class='attr-value'>'rotate'</span>,
+ <span class='attr-value'>'skewX'</span> and <span class='attr-value'>'skewY'</span></dt>
+ <dd>
+ <p>distance(V<sub>a</sub>, V<sub>b</sub>) = sqrt((V<sub>a</sub>.angle − V<sub>b</sub>.angle)<sup>2</sup>), where:</p>
+ <div class='vardefs'>
+ <div>
+ V<sub><var>i</var></sub>.angle is the angle component of the
+ V<sub><var>i</var></sub> rotation or skew transform value.
+ </div>
+ </div>
+ <p>
+ 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.
+ </p>
+ </dd>
+</dl>
+
+<p>Distance functions for all other data types are not defined.
+If <span class='attr-value'>calcMode="paced"</span> is used on an
+animation of an attribute or property whose type is not one of
+those listed above, the animation effect is undefined.
+<a>SVG user agents</a> may choose to
+perform the animation as if <span class='attr-value'>calcMode="linear"</span>,
+but this is not required. Authors are recommended not to specify
+paced animation on types not listed above.</p>
<h3 id="TimingAttributes">Attributes to control the timing of the animation</h3>
@@ -539,11 +545,13 @@
animation runs repeatedly, and whether to retain the end state
the animation once the animation ends.</p>
- <p id="optWSP">In the syntax specifications that follow, optional white
- space is indicated as "S", defined as follows:</p>
+<p id="optWSP">In the syntax specifications that follow, optional white
+space is indicated as "S", defined as follows:</p>
+
<pre>
S ::= (#x20 | #x9 | #xD | #xA)*
</pre>
+
<div class="adef-list">
<p><em>Attribute definitions:</em></p>
<dl>
@@ -895,14 +903,15 @@
</dd>
</dl>
- <p>The <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>]
- defines the detailed processing
- rules associated with the above attributes. Except for any
- SVG-specific rules explicitly mentioned in this
- specification, the SMIL Animation specification is the normative definition of
- the processing rules for the above attributes.</p>
</div>
+<p>The <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+specification [<a href="refs.html#ref-SMILANIM">SMILANIM</a>] defines the detailed processing
+rules associated with the above attributes. Except for any SVG-specific
+rules explicitly mentioned in this specification, the SMIL Animation
+specification is the normative definition of the processing rules for
+the above attributes.</p>
+
<h4 id="ClockValueSyntax">Clock values</h4>
<p>Clock values have the same syntax as in
@@ -925,39 +934,38 @@
2DIGIT ::= DIGIT DIGIT
DIGIT ::= [0-9]
</pre>
- <p>For Timecount values, the default metric suffix is "s" (for
- seconds). No embedded white space is allowed in clock values,
- although leading and trailing white space characters will be
- ignored.</p>
- <p>Clock values describe <a
- href="#PresentationTime">presentation time</a>.</p>
- <p>The following are examples of legal clock values:</p>
- <ul>
- <li>Full clock values: <code><br />
- 02:30:03 </code> = 2 hours, 30
- minutes and 3 seconds<br />
- <code> 50:00:10.25</code> = 50 hours, 10 seconds and
- 250 milliseconds</li>
- <li>Partial clock value: <code><br />
- 02:33 </code> = 2 minutes and 33
- seconds<br />
- <code> 00:10.5</code> = 10.5 seconds = 10 seconds and
- 500 milliseconds</li>
- <li>Timecount values:<br />
- <code> 3.2h </code> = 3.2 hours = 3
- hours and 12 minutes<br />
- <code> 45min </code> = 45 minutes<br />
- <code> 30s </code> = 30
- seconds<br />
- <code> 5ms </code> = 5
- milliseconds<br />
- <code> 12.467 </code> = 12 seconds and 467
- milliseconds</li>
- </ul>
- <p>Fractional values are just (base 10) floating point
- definitions of seconds. Thus:</p>
- <p><code>00.5s = 500 milliseconds<br />
- 00:00.005 = 5 milliseconds</code></p>
+
+<p>For Timecount values, the default metric suffix is "s" (for
+seconds). No embedded white space is allowed in clock values,
+although leading and trailing white space characters will be
+ignored.</p>
+
+<p>Clock values describe <a href="#PresentationTime">presentation time</a>.</p>
+
+<p>The following are examples of legal clock values:</p>
+
+<ul>
+ <li>Full clock values: <code><br />
+ 02:30:03 </code> = 2 hours, 30 minutes and 3 seconds<br />
+ <code> 50:00:10.25</code> = 50 hours, 10 seconds and 250 milliseconds</li>
+
+ <li>Partial clock value: <code><br />
+ 02:33 </code> = 2 minutes and 33 seconds<br />
+ <code> 00:10.5</code> = 10.5 seconds = 10 seconds and 500 milliseconds</li>
+
+ <li>Timecount values:<br />
+ <code> 3.2h </code> = 3.2 hours = 3 hours and 12 minutes<br />
+ <code> 45min </code> = 45 minutes<br />
+ <code> 30s </code> = 30 seconds<br />
+ <code> 5ms </code> = 5 milliseconds<br />
+ <code> 12.467 </code> = 12 seconds and 467 milliseconds</li>
+</ul>
+
+<p>Fractional values are just (base 10) floating point definitions of seconds.
+Thus:</p>
+
+<p><code> 00.5s </code> = 500 milliseconds<br />
+<code> 00:00.005</code> = 5 milliseconds</p>
<h3 id="ValueAttributes">Attributes that define animation values over time</h3>
@@ -1308,39 +1316,45 @@
<h3 id="AdditionAttributes">Attributes that control whether animations are additive</h3>
- <p>It is frequently useful to define animation as an offset or
- delta to an attribute's value, rather than as absolute values.
- A simple "grow" animation can increase the width of an object
- by 10 pixels:</p>
-<pre>
-<rect width="20px" ...>
- <animate attributeName="width" from="0px" to="10px" dur="10s"
- additive="sum"/>
-</rect>
-</pre>
- <p>It is frequently useful for repeated animations to build
- upon the previous results, accumulating with each interation.
- The following example causes the rectangle to continue to grow
- with each repeat of the animation:</p>
-<pre>
-<rect width="20px" ...>
- <animate attributeName="width" from="0px" to="10px" dur="10s"
- additive="sum" accumulate="sum" repeatCount="5"/>
-</rect>
-</pre>
- <p>At the end of the first repetition, the rectangle has a
- width of 30 pixels. At the end of the second repetition, the
- rectangle has a width of 40 pixels. At the end of the fifth
- repetition, the rectangle has a width of 70 pixels.</p>
- <p>For more information about additive animations, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAnim">
- SMIL Animation: Additive animation</a>. For more information on
- cumulative animations, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Accumulate">
- SMIL Animation: Controlling behavior of repeating animation -
- Cumulative animation</a>.</p>
- <p>The following attributes are the <dfn id='animation-addition-attributes'>animation addition attributes</dfn>,
- which are common to elements <edit:elementswithattributecategory name='animation addition'/>.</p>
+<p>It is frequently useful to define animation as an offset or
+delta to an attribute's value, rather than as absolute values.
+A simple "grow" animation can increase the width of an object
+by 10 pixels:</p>
+
+<pre><![CDATA[
+<rect width="20px" ...>
+ <animate attributeName="width" from="0px" to="10px" dur="10s"
+ additive="sum"/>
+</rect>
+]]></pre>
+
+<p>It is frequently useful for repeated animations to build
+upon the previous results, accumulating with each interation.
+The following example causes the rectangle to continue to grow
+with each repeat of the animation:</p>
+
+<pre><![CDATA[
+<rect width="20px" ...>
+ <animate attributeName="width" from="0px" to="10px" dur="10s"
+ additive="sum" accumulate="sum" repeatCount="5"/>
+</rect>
+]]></pre>
+
+<p>At the end of the first repetition, the rectangle has a
+width of 30 pixels. At the end of the second repetition, the
+rectangle has a width of 40 pixels. At the end of the fifth
+repetition, the rectangle has a width of 70 pixels.</p>
+
+<p>For more information about additive animations, see <a
+href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAnim">
+SMIL Animation: Additive animation</a>. For more information on
+cumulative animations, see <a
+href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Accumulate">
+SMIL Animation: Controlling behavior of repeating animation -
+Cumulative animation</a>.</p>
+
+<p>The following attributes are the <dfn id='animation-addition-attributes'>animation addition attributes</dfn>,
+which are common to elements <edit:elementswithattributecategory name='animation addition'/>.</p>
<div class="adef-list">
<p><em>Attribute definitions:</em></p>
@@ -1414,29 +1428,29 @@
<h3 id="Inheritance">Inheritance</h3>
- <p>SVG allows both attributes and properties to be animated. If
- a given attribute or property is inheritable by descendants,
- then animations on a parent element such as a <a>'g'</a> element has the effect of
- propagating the attribute or property animation values to
- descendant elements as the animation proceeds; thus, descendant
- elements can inherit animated attributes and properties from
- their ancestors.</p>
+<p>SVG allows both attributes and properties to be animated. If
+a given attribute or property is inheritable by descendants,
+then animations on a parent element such as a <a>'g'</a> element has the effect of
+propagating the attribute or property animation values to
+descendant elements as the animation proceeds; thus, descendant
+elements can inherit animated attributes and properties from
+their ancestors.</p>
<h3 id="AnimateElement">The <span class="element-name">'animate'</span> element</h3>
<edit:with element='animate'>
- <p>The <a>'animate'</a> element is
- used to animate a single attribute or property over time. For
- example, to make a rectangle repeatedly fade away over 5
- seconds, you can specify:</p>
+<p>The <a>'animate'</a> element is
+used to animate a single attribute or property over time. For
+example, to make a rectangle repeatedly fade away over 5
+seconds, you can specify:</p>
-<pre>
-<rect>
- <animate attributeType="CSS" attributeName="opacity"
- from="1" to="0" dur="5s" repeatCount="indefinite" />
-</rect>
-</pre>
+<pre><![CDATA[
+<rect>
+ <animate attributeType="CSS" attributeName="opacity"
+ from="1" to="0" dur="5s" repeatCount="indefinite" />
+</rect>
+]]></pre>
<p>Except for any SVG-specific rules explicitly mentioned in this
specification, the normative definition for this element is the
@@ -1449,11 +1463,10 @@
<p>The <a>'color-interpolation'</a> property applies to color interpolations
that result from animations using the <a>'animate'</a> element.</p>
- <p>For a list of attributes and properties that can be animated
- using the <a>'animate'</a> element,
- see <a
- href="animate.html#AnimationAttributesAndProperties">Elements,
- attributes and properties that can be animated</a>.</p>
+<p>For a list of attributes and properties that can be animated
+using the <a>'animate'</a> element, see
+<a href="animate.html#AnimationAttributesAndProperties">Elements,
+attributes and properties that can be animated</a>.</p>
</edit:with>
@@ -1461,13 +1474,13 @@
<edit:with element='set'>
- <p>The <a>'set'</a> element provides
- a simple means of just setting the value of an attribute for a
- specified duration. It supports all attribute types, including
- those that cannot reasonably be interpolated, such as string
- and boolean values. The <a>'set'</a>
- element is non-additive. The additive and accumulate attributes
- are not allowed, and will be ignored if specified.</p>
+<p>The <a>'set'</a> element provides
+a simple means of just setting the value of an attribute for a
+specified duration. It supports all attribute types, including
+those that cannot reasonably be interpolated, such as string
+and boolean values. The <a>'set'</a>
+element is non-additive. The additive and accumulate attributes
+are not allowed, and will be ignored if specified.</p>
<p>Except for any SVG-specific rules explicitly mentioned in this
specification, the normative definition for this element is the
@@ -1718,35 +1731,35 @@
<a id="ExampleAnimMotion01" name="ExampleAnimMotion01"></a>
<p><span class="example-ref">Example animMotion01</span> shows
a triangle moving along a motion path.</p>
-<pre>
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="5cm" height="3cm" viewBox="0 0 500 300"
+<pre><![CDATA[
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="3cm" viewBox="0 0 500 300"
xmlns="http://www.w3.org/2000/svg" version="1.1"
- xmlns:xlink="http://www.w3.org/1999/xlink" >
- <desc>Example animMotion01 - demonstrate motion animation computations</desc>
- <rect x="1" y="1" width="498" height="298"
- fill="none" stroke="blue" stroke-width="2" />
- <!-- Draw the outline of the motion path in blue, along
- with three small circles at the start, middle and end. -->
- <path id="path1" d="M100,250 C 100,50 400,50 400,250"
- fill="none" stroke="blue" stroke-width="7.06" />
- <circle cx="100" cy="250" r="17.64" fill="blue" />
- <circle cx="250" cy="100" r="17.64" fill="blue" />
- <circle cx="400" cy="250" r="17.64" fill="blue" />
- <!-- Here is a triangle which will be moved about the motion path.
+ xmlns:xlink="http://www.w3.org/1999/xlink" >
+ <desc>Example animMotion01 - demonstrate motion animation computations</desc>
+ <rect x="1" y="1" width="498" height="298"
+ fill="none" stroke="blue" stroke-width="2" />
+ <!-- Draw the outline of the motion path in blue, along
+ with three small circles at the start, middle and end. -->
+ <path id="path1" d="M100,250 C 100,50 400,50 400,250"
+ fill="none" stroke="blue" stroke-width="7.06" />
+ <circle cx="100" cy="250" r="17.64" fill="blue" />
+ <circle cx="250" cy="100" r="17.64" fill="blue" />
+ <circle cx="400" cy="250" r="17.64" fill="blue" />
+ <!-- Here is a triangle which will be moved about the motion path.
It is defined with an upright orientation with the base of
- the triangle centered horizontally just above the origin. -->
- <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
- fill="yellow" stroke="red" stroke-width="7.06" >
- <!-- Define the motion path animation -->
- <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
- <mpath xlink:href="#path1"/>
- </animateMotion>
- </path>
-</svg>
-</pre>
+ 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>
+]]></pre>
<table summary="Example animMotion01">
<caption align="bottom">
Example animMotion01
@@ -1918,13 +1931,11 @@
are suggested to use <em>from-to</em>, <em>from-by</em>, <em>by</em> or
<em>values animations</em> to achieve any desired transform animation.</p>
-<p>
- If
- <a href="#CalcModeAttribute"><span class="attr-name">'calcMode'</span></a>
- has the value <span class="attr-value">'paced'</span>, then the "distance" for the transformation is
- calculated as further described in
- <a href="#complexDistances">Paced animations and complex types</a>.
-</p>
+<p>If <a href="#CalcModeAttribute"><span class="attr-name">'calcMode'</span></a>
+has the value <span class="attr-value">'paced'</span>, then the "distance" for the transformation is
+calculated as further described in
+<a href="#complexDistances">Paced animations and complex types</a>.</p>
+
<p>When an animation is active, the effect of non-additive
<a>'animateTransform'</a> (i.e., <span class="attr-value">additive="replace"</span>)
is to replace the given attribute's value with the transformation defined by
@@ -1933,16 +1944,16 @@
transformation matrix corresponding to the transformation defined by this
<a>'animateTransform'</a>. To illustrate:</p>
-<pre>
-<rect transform="skewX(30)"...>
- <animateTransform attributeName="transform" attributeType="XML"
+<pre><![CDATA[
+<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"
+ additive="replace" fill="freeze"/>
+ <animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="2" dur="5s"
- additive="replace" fill="freeze"/>
-</rect>
-</pre>
+ additive="replace" fill="freeze"/>
+</rect>
+]]></pre>
<p>In the code snippet above, because the both animations have
<span class="attr-value">additive="replace"</span>, the first
@@ -1952,22 +1963,22 @@
result of the above two animations would be equivalent to the
following static rectangle:</p>
-<pre>
-<rect transform="scale(2)" ... />
-</pre>
+<pre><![CDATA[
+<rect transform="scale(2)" ... />
+]]></pre>
<p>whereas in the following example:</p>
-<pre>
-<rect transform="skewX(30)"...>
- <animateTransform attributeName="transform" attributeType="XML"
+<pre><![CDATA[
+<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"
+ additive="sum" fill="freeze"/>
+ <animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="2" dur="5s"
- additive="sum" fill="freeze"/>
-</rect>
-</pre>
+ additive="sum" fill="freeze"/>
+</rect>
+]]></pre>
<p>In this code snippet, because the both animations have
<span class="attr-value">additive="sum"</span>, the first animation
@@ -1978,9 +1989,9 @@
the above two animations would be equivalent to the following
static rectangle:</p>
-<pre>
-<rect transform="skewX(30) rotate(90) scale(2)" ... />
-</pre>
+<pre><![CDATA[
+<rect transform="skewX(30) rotate(90) scale(2)" ... />
+]]></pre>
<p>Note that the zero value used when performing a <em>by animation</em>
with <span class='attr-value'>type="scale"</span> is indeed 0.
@@ -1990,10 +2001,12 @@
to its original size at time 5s (since the animated transform list value is
<span class='attr-value'>'scale(1)'</span>):</p>
-<pre><![CDATA[<rect width="100" height="100">
+<pre><![CDATA[
+<rect width="100" height="100">
<animateTransform attributeName="transform" attributeType="XML"
type="scale" by="1" dur="5s" fill="freeze"/>
-</rect>]]></pre>
+</rect>
+]]></pre>
<p>When a transform animation has <span class='attr-value'>accumulate='sum'</span>,
the accumulation that occurs for each completed repetition of the animation
@@ -2003,11 +2016,13 @@
transformation matrix that these values represent. For example, in the following
code snippet, 3 is added to the scale value at the start of each repetition:</p>
-<pre><![CDATA[<rect width="100" height="100">
+<pre><![CDATA[
+<rect width="100" height="100">
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="2" to="3" repeatCount="3" dur="4s"
fill="freeze"/>
-</rect>]]></pre>
+</rect>
+]]></pre>
<p>The following graph and table shows the animated <a>'transform'</a> value on
the <a>'rect'</a> over the course of the animation:</p>
@@ -2048,11 +2063,13 @@
<p>For example, consider the following code snippet, which has a cumulative transform
animation of type <span class='attr-value'>'rotate'</span>:</p>
-<pre><![CDATA[<rect width="100" height="100">
+<pre><![CDATA[
+<rect width="100" height="100">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 30 40" to="10 30 40"
repeatCount="2" dur="1s" fill="freeze"/>
-</rect>]]></pre>
+</rect>
+]]></pre>
<p>At time 1 second, the animated value of <a>'transform'</a> on the <a>'rect'</a>
will jump from <span class='attr-value'>'rotate(10 30 40)'</span> to <span class='attr-value'>'rotate(10 60 80)'</span>,
@@ -2119,155 +2136,155 @@
subsequent animation uses a keyword value, additive animation
is not possible.</p>
- <table class='vert' summary="animatable data types">
- <tr>
- <th>Data type</th>
- <th>Additive?</th>
- <th><a>'animate'</a></th>
- <th><a>'set'</a></th>
- <th><a>'animateColor'</a></th>
- <th><a>'animateTransform'</a></th>
- <!--
- <th><a href="animate.html#AnimateColorElement"><span class="element-name">‘animate<br /> Color’</span></a></th>
- <th><a href="animate.html#AnimateTransformElement"><span class="element-name">‘animate<br /> Transform’</span></a></th>
- -->
- <th>Notes</th>
- </tr>
- <tr>
- <td><a><angle></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeColor"><color></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>Only additive if each value can be converted to an RGB color.</td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeCoordinate"><coordinate></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeFrequency"><frequency></a></td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeInteger"><integer></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a><length></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a href="types.html#DataTypeList"><list-of-<var>T</var>s></a></td>
- <td>no</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a><number></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypePaint"><paint></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>Only additive if each value can be converted to an RGB color.</td>
- </tr>
- <tr>
- <td><a><percentage></a></td>
- <td>yes</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a href="types.html#DataTypeTime"><time></a></td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td><a
- href="types.html#DataTypeTransformList"><transform-list></a></td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td>no</td>
- <td>yes</td>
- <td>Additive means that a transformation is post-multiplied
- to the base set of transformations.</td>
- </tr>
- <tr>
- <td><a href="types.html#DataTypeIRI"><iri></a></td>
- <td>no</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- <tr>
- <td>All other data types used in animatable attributes and
- properties</td>
- <td>no</td>
- <td>yes</td>
- <td>yes</td>
- <td>no</td>
- <td>no</td>
- <td> </td>
- </tr>
- </table>
+<table class='vert' summary="animatable data types">
+ <tr>
+ <th>Data type</th>
+ <th>Additive?</th>
+ <th><a>'animate'</a></th>
+ <th><a>'set'</a></th>
+ <th><a>'animateColor'</a></th>
+ <th><a>'animateTransform'</a></th>
+ <!--
+ <th><a href="animate.html#AnimateColorElement"><span class="element-name">‘animate<br /> Color’</span></a></th>
+ <th><a href="animate.html#AnimateTransformElement"><span class="element-name">‘animate<br /> Transform’</span></a></th>
+ -->
+ <th>Notes</th>
+ </tr>
+ <tr>
+ <td><a><angle></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeColor"><color></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>Only additive if each value can be converted to an RGB color.</td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeFrequency"><frequency></a></td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeInteger"><integer></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a><length></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeList"><list-of-<var>T</var>s></a></td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a><number></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypePaint"><paint></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>Only additive if each value can be converted to an RGB color.</td>
+ </tr>
+ <tr>
+ <td><a><percentage></a></td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeTime"><time></a></td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td><a
+ href="types.html#DataTypeTransformList"><transform-list></a></td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>yes</td>
+ <td>Additive means that a transformation is post-multiplied
+ to the base set of transformations.</td>
+ </tr>
+ <tr>
+ <td><a href="types.html#DataTypeIRI"><iri></a></td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>All other data types used in animatable attributes and
+ properties</td>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+</table>
<p>Any deviation from the above table or other special note
about the animation capabilities of a particular attribute or
@@ -2279,14 +2296,14 @@
<p><span class="example-ref">Example dom01</span> shows a simple animation
using the DOM.</p>
-<pre>
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="4cm" height="2cm" viewBox="0 0 400 200"
+<pre><![CDATA[
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="4cm" height="2cm" viewBox="0 0 400 200"
xmlns="http://www.w3.org/2000/svg"
- onload="StartAnimation(evt)" version="1.1">
- <script type="application/ecmascript"><![CDATA[
+ onload="StartAnimation(evt)" version="1.1">
+ <script type="application/ecmascript">]]><![CDATA[<![CDATA[
var timevalue = 0;
var timer_increment = 50;
var max_time = 5000;
@@ -2297,7 +2314,7 @@
}
function ShowAndGrowElement() {
timevalue = timevalue + timer_increment;
- if (timevalue > max_time)
+ if (timevalue > max_time)
return;
// Scale the text string gradually until it is 20 times larger
scalefactor = (timevalue * 20.) / max_time;
@@ -2305,83 +2322,92 @@
// Make the string more opaque
opacityfactor = timevalue / max_time;
text_element.setAttribute("opacity", opacityfactor);
- // Call ShowAndGrowElement again <timer_increment> milliseconds later.
+ // Call ShowAndGrowElement again <timer_increment> milliseconds later.
setTimeout("ShowAndGrowElement()", timer_increment)
}
window.ShowAndGrowElement = ShowAndGrowElement
- ]]></script>
- <rect x="1" y="1" width="398" height="198"
- fill="none" stroke="blue" stroke-width="2"/>
- <g transform="translate(50,150)" fill="red" font-size="7">
- <text id="TextElement">SVG</text>
- </g>
-</svg>
-</pre>
- <table summary="Example dom01">
- <caption align="bottom">
- Example dom01
- </caption>
- <tr>
- <td width="151"><img width="151" height="76"
- alt="Example dom01 - at zero seconds"
- src="images/animate/dom01a.png" /> <span
- class="table-heading-1">At zero seconds</span></td>
- <td width="20"> </td>
- <td width="151"><img width="151" height="76"
- alt="Example dom01 - at three seconds"
- src="images/animate/dom01b.png" /> <span
- class="table-heading-1">At 2.5 seconds</span></td>
- <td width="20"> </td>
- <td width="151"><img width="151" height="76"
- alt="Example dom01 - at six seconds"
- src="images/animate/dom01c.png" /> <span
- class="table-heading-1">At five seconds</span></td>
- </tr>
- </table>
- <p class="view-as-svg"><a href="images/animate/dom01.svg">View
- this example as SVG (SVG-enabled browsers only)</a></p>
- <p>The above SVG file contains a single graphics element, a
- text string that says "SVG". The animation loops for 5 seconds.
- The text string starts out small and transparent and grows to
- be large and opaque. Here is an explanation of how this example
- works:</p>
- <ul>
- <li>The <span class='attr-value'>onload="StartAnimation(evt)"</span> attribute
- indicates that, once the document has been fully loaded and
- processed, invoke ECMAScript function
- <code>StartAnimation</code>.</li>
- <li>The <a>'script'</a> element defines the ECMAScript which makes
- the animation happen. The <code>StartAnimation()</code>
- function is only called once to give a value to global
- variable <code>text_element</code> and to make the initial
- call to <code>ShowAndGrowElement()</code>.
- <code>ShowAndGrowElement()</code> is called every 50
- milliseconds and resets the <a>'transform'</a> and
- <a>'style attribute'</a> attributes on the text element to new
- values each time it is called. At the end of
- <code>ShowAndGrowElement</code>, the function tells the
- ECMAScript engine to call itself again after 50 more
- milliseconds.</li>
- <li>The <a>'g'</a> 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.</li>
- <li>The <a>'text'</a> element contains the text string and is the
- element whose attributes get changed during the
- animation.</li>
- </ul>
- <p>If scripts are modifying the same attributes or properties
- that are being animated by SVG's
- <a href="#AnimationElements">animation elements</a>,
- the scripts modify the base value for the animation. If a base
- value is modified while an animation element is animating the
- corresponding attribute or property, the animations are
- required to adjust dynamically to the new base value.</p>
- <p>If a script is modifying a property on the override style
- sheet at the same time that an <a>animation element</a> is
- animating that property, the result is
- implementation-dependent; thus, it is recommended that this be
- avoided.</p>
+ ]]>]]><![CDATA[</script>
+ <rect x="1" y="1" width="398" height="198"
+ fill="none" stroke="blue" stroke-width="2"/>
+ <g transform="translate(50,150)" fill="red" font-size="7">
+ <text id="TextElement">SVG</text>
+ </g>
+</svg>
+]]></pre>
+
+<table summary="Example dom01">
+ <caption align="bottom">
+ Example dom01
+ </caption>
+ <tr>
+ <td width="151"><img width="151" height="76"
+ alt="Example dom01 - at zero seconds"
+ src="images/animate/dom01a.png" /> <span
+ class="table-heading-1">At zero seconds</span></td>
+ <td width="20"> </td>
+ <td width="151"><img width="151" height="76"
+ alt="Example dom01 - at three seconds"
+ src="images/animate/dom01b.png" /> <span
+ class="table-heading-1">At 2.5 seconds</span></td>
+ <td width="20"> </td>
+ <td width="151"><img width="151" height="76"
+ alt="Example dom01 - at six seconds"
+ src="images/animate/dom01c.png" /> <span
+ class="table-heading-1">At five seconds</span></td>
+ </tr>
+</table>
+
+<p class="view-as-svg"><a href="images/animate/dom01.svg">View
+this example as SVG (SVG-enabled browsers only)</a></p>
+
+<p>The above SVG file contains a single graphics element, a
+text string that says "SVG". The animation loops for 5 seconds.
+The text string starts out small and transparent and grows to
+be large and opaque. Here is an explanation of how this example
+works:</p>
+
+<ul>
+ <li>The <span class='attr-value'>onload="StartAnimation(evt)"</span> attribute
+ indicates that, once the document has been fully loaded and
+ processed, invoke ECMAScript function
+ <code>StartAnimation</code>.</li>
+
+ <li>The <a>'script'</a> element defines the ECMAScript which makes
+ the animation happen. The <code>StartAnimation()</code>
+ function is only called once to give a value to global
+ variable <code>text_element</code> and to make the initial
+ call to <code>ShowAndGrowElement()</code>.
+ <code>ShowAndGrowElement()</code> is called every 50
+ milliseconds and resets the <a>'transform'</a> and
+ <a>'style attribute'</a> attributes on the text element to new
+ values each time it is called. At the end of
+ <code>ShowAndGrowElement</code>, the function tells the
+ ECMAScript engine to call itself again after 50 more
+ milliseconds.</li>
+
+ <li>The <a>'g'</a> 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.</li>
+
+ <li>The <a>'text'</a> element contains the text string and is the
+ element whose attributes get changed during the
+ animation.</li>
+</ul>
+
+<p>If scripts are modifying the same attributes or properties
+that are being animated by SVG's
+<a href="#AnimationElements">animation elements</a>,
+the scripts modify the base value for the animation. If a base
+value is modified while an animation element is animating the
+corresponding attribute or property, the animations are
+required to adjust dynamically to the new base value.</p>
+
+<p>If a script is modifying a property on the override style
+sheet at the same time that an <a>animation element</a> is
+animating that property, the result is
+implementation-dependent; thus, it is recommended that this be
+avoided.</p>
<h2 id="DOMInterfaces">DOM interfaces</h2>