--- a/master/animate.html Sat May 26 16:56:00 2012 +1000
+++ b/master/animate.html Sat May 26 10:04:08 2012 -0700
@@ -189,6 +189,7 @@
<h3 id="AnimationElementsExample">Animation elements example</h3>
+<div class="example">
<p id="ExampleAnim01"><span class="example-ref">Example anim01</span> below
demonstrates each of SVG's five animation elements.</p>
@@ -250,6 +251,7 @@
Would be good to replace this with an <edit:example>, if that
supported multiple images.
-->
+<div class="figure">
<table summary="Example anim01">
<caption align="bottom">
Example anim01
@@ -277,8 +279,10 @@
class="table-heading-1">At nine seconds</span></td>
</tr>
</table>
+</div>
<p class="view-as-svg"><a href="images/animate/anim01.svg">View
this example as SVG (SVG-enabled browsers only)</a></p>
+</div>
<p>The sections below describe the various animation attributes
and elements.</p>
@@ -398,6 +402,7 @@
<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
@@ -407,6 +412,7 @@
<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
@@ -940,6 +946,7 @@
<p>Clock values describe <a href="#PresentationTime">presentation time</a>.</p>
+<div class="example">
<p>The following are examples of legal clock values:</p>
<ul>
@@ -964,6 +971,7 @@
<p><code> 00.5s </code> = 500 milliseconds<br />
<code> 00:00.005</code> = 5 milliseconds</p>
+</div>
<h3 id="ValueAttributes">Attributes that define animation values over time</h3>
@@ -1223,6 +1231,7 @@
output <em>unit time</em>. See also the section <a
href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#TimingAndRealWorldClockTime">
Timing and real-world clock times</a>.</p>
+ <div class="example">
<table summary="examples of keySplines">
<caption align="bottom">
Examples of <span class="attr-name">keySplines</span>
@@ -1254,6 +1263,7 @@
class="table-heading-1">keySplines="1 0 .25 .25"</span></td>
</tr>
</table>
+
<p>To illustrate the calculations, consider the simple
example:</p>
<pre>
@@ -1277,7 +1287,7 @@
</thead>
<tbody>
<tr>
- <td>0 0 1 1</td>
+ <th>0 0 1 1</th>
<td>10.0</td>
<td>12.5</td>
<td>15.0</td>
@@ -1285,7 +1295,7 @@
<td>20.0</td>
</tr>
<tr>
- <td>.5 0 .5 1</td>
+ <th>.5 0 .5 1</th>
<td>10.0</td>
<td>11.0</td>
<td>15.0</td>
@@ -1293,7 +1303,7 @@
<td>20.0</td>
</tr>
<tr>
- <td>0 .75 .25 1</td>
+ <th>0 .75 .25 1</th>
<td>10.0</td>
<td>18.0</td>
<td>19.3</td>
@@ -1301,7 +1311,7 @@
<td>20.0</td>
</tr>
<tr>
- <td>1 0 .25 .25</td>
+ <th>1 0 .25 .25</th>
<td>10.0</td>
<td>10.1</td>
<td>10.6</td>
@@ -1310,6 +1320,7 @@
</tr>
</tbody>
</table>
+ </div>
<p>For a formal definition of Bézier spline
calculation, see [<a
href="refs.html#ref-FOLEY-VANDAM">FOLEY-VANDAM</a>], pp. 488-491.</p>
@@ -1318,8 +1329,10 @@
<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
+delta to an attribute's value, rather than as absolute values.</p>
+
+<div class="example">
+<p>A simple "grow" animation can increase the width of an object
by 10 pixels:</p>
<pre><![CDATA[
@@ -1328,9 +1341,13 @@
additive="sum"/>
</rect>
]]></pre>
+</div>
<p>It is frequently useful for repeated animations to build
-upon the previous results, accumulating with each interation.
+upon the previous results, accumulating with each iteration.</p>
+
+<div class="example">
+<p>
The following example causes the rectangle to continue to grow
with each repeat of the animation:</p>
@@ -1345,6 +1362,7 @@
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>
+</div>
<p>For more information about additive animations, see <a
href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAnim">
@@ -1442,9 +1460,9 @@
<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>
+used to animate a single attribute or property over time.</p>
+<div class="example">
+<p>This example makes a rectangle repeatedly fade away over 5 seconds:</p>
<pre><![CDATA[
<rect>
@@ -1452,6 +1470,7 @@
from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
]]></pre>
+</div>
<p>Except for any SVG-specific rules explicitly mentioned in this
specification, the normative definition for this element is the
@@ -1725,6 +1744,7 @@
agent's <a href="paths.html#DistanceAlongAPath">distance along
the path</a> algorithm.</p>
+ <div class="example">
<p>The following example demonstrates the supplemental
transformation matrices that are computed during a motion path
animation.</p>
@@ -1815,7 +1835,7 @@
</tr>
</tbody>
</table>
-
+ </div>
<p>For a list of elements that can be animated using the <a>'animateMotion'</a>
element, see <a href="animate.html#AnimationAttributesAndProperties">Elements,
attributes and properties that can be animated</a>.</p>
@@ -1946,7 +1966,10 @@
the <a>'animateTransform'</a>. The effect of additive (i.e.,
<span class="attr-value">additive="sum"</span>) is to post-multiply the
transformation matrix corresponding to the transformation defined by this
-<a>'animateTransform'</a>. To illustrate:</p>
+<a>'animateTransform'</a>.</p>
+
+<div class="example">
+<p>To illustrate:</p>
<pre><![CDATA[
<rect transform="skewX(30)"...>
@@ -1970,9 +1993,11 @@
<pre><![CDATA[
<rect transform="scale(2)" ... />
]]></pre>
+</div>
-<p>whereas in the following example:</p>
+<!--<p>whereas in the following example:</p>-->
+<div class="example">
<pre><![CDATA[
<rect transform="skewX(30)"...>
<animateTransform attributeName="transform" attributeType="XML"
@@ -1996,8 +2021,10 @@
<pre><![CDATA[
<rect transform="skewX(30) rotate(90) scale(2)" ... />
]]></pre>
+</div>
-<p>Note that the zero value used when performing a <em>by animation</em>
+<div class="note">
+<p>The zero value used when performing a <em>by animation</em>
with <span class='attr-value'>type="scale"</span> is indeed 0.
Thus, performing the following animation causes the rectangle to be
invisible at time 0s (since the animated transform list value is
@@ -2011,13 +2038,17 @@
type="scale" by="1" dur="5s" fill="freeze"/>
</rect>
]]></pre>
+</div>
<p>When a transform animation has <span class='attr-value'>accumulate='sum'</span>,
the accumulation that occurs for each completed repetition of the animation
is computed on the values specified in the <a>'animateTransform'</a> element's
<a href="animate.html#ValueAttributes">animation value attributes</a> (i.e.,
<a>'values'</a>, <a>'from'</a>, <a>'to'</a> and <a>'by'</a>) and not on the
-transformation matrix that these values represent. For example, in the following
+transformation matrix that these values represent.</p>
+
+<div class="example">
+<p>For example, in the following
code snippet, 3 is added to the scale value at the start of each repetition:</p>
<pre><![CDATA[
@@ -2035,25 +2066,30 @@
<tr>
<td><img src="images/cumulative-transform-graph-1.png" width="430" height="320" alt="The scale value animates from 2 to 12 with discontinuities at 4s and 8s."/></td>
<td>
- <table class='vert compact'>
- <tr><th>Time</th><th>Value</th></tr>
- <tr><td>0s</td><td>scale(2)</td></tr>
- <tr><td>1s</td><td>scale(2.25)</td></tr>
- <tr><td>2s</td><td>scale(2.5)</td></tr>
- <tr><td>3s</td><td>scale(2.75)</td></tr>
- <tr><td>4s</td><td>scale(5)</td></tr>
- <tr><td>5s</td><td>scale(5.25)</td></tr>
- <tr><td>6s</td><td>scale(5.5)</td></tr>
- <tr><td>7s</td><td>scale(5.75)</td></tr>
- <tr><td>8s</td><td>scale(8)</td></tr>
- <tr><td>9s</td><td>scale(8.25)</td></tr>
- <tr><td>10s</td><td>scale(8.5)</td></tr>
- <tr><td>11s</td><td>scale(8.75)</td></tr>
- <tr><td>12s</td><td>scale(9)</td></tr>
+ <table class="data compact">
+ <thead>
+ <tr><th>Time</th><th>Value</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>0s</td><td >scale(2)</td></tr>
+ <tr><td>1s</td><td>scale(2.25)</td></tr>
+ <tr><td>2s</td><td>scale(2.5)</td></tr>
+ <tr><td>3s</td><td>scale(2.75)</td></tr>
+ <tr><td>4s</td><td>scale(5)</td></tr>
+ <tr><td>5s</td><td>scale(5.25)</td></tr>
+ <tr><td>6s</td><td>scale(5.5)</td></tr>
+ <tr><td>7s</td><td>scale(5.75)</td></tr>
+ <tr><td>8s</td><td>scale(8)</td></tr>
+ <tr><td>9s</td><td>scale(8.25)</td></tr>
+ <tr><td>10s</td><td>scale(8.5)</td></tr>
+ <tr><td>11s</td><td>scale(8.75)</td></tr>
+ <tr><td>12s</td><td>scale(9)</td></tr>
+ </tbody>
</table>
</td>
</tr>
</table>
+</div>
<p>Transform item types that can have multiple values – <span class='attr-value'>'translate'</span>,
<span class='attr-value'>'scale'</span> and <span class='attr-value'>'rotate'</span> – are
@@ -2064,6 +2100,7 @@
of a <span class='attr-value'>'translate'</span> and the <span class='attr-value'><cx cy></span>
components of a <span class='attr-value'>'rotate'</span>.</p>
+<div class="example">
<p>For example, consider the following code snippet, which has a cumulative transform
animation of type <span class='attr-value'>'rotate'</span>:</p>
@@ -2080,6 +2117,7 @@
because the effect of the accumulation is to take the value at the end of the first repetition,
<span class='attr-value'>'10 30 40'</span>, and add to it the value at simple duration <var>t</var> = 0s, which
is <span class='attr-value'>'0 30 40'</span>.</p>
+</div>
<p>For a list of attributes and properties that can be animated using the
<a>'animateTransform'</a> element, see
@@ -2159,56 +2197,7 @@
</thead>
<tbody>
<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>
+ <th><a><angle></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
@@ -2217,26 +2206,8 @@
<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>
+ <th><a
+ href="types.html#DataTypeColor"><color></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
@@ -2245,7 +2216,8 @@
<td>Only additive if each value can be converted to an RGB color.</td>
</tr>
<tr>
- <td><a><percentage></a></td>
+ <th><a
+ href="types.html#DataTypeCoordinate"><coordinate></a></th>
<td>yes</td>
<td>yes</td>
<td>yes</td>
@@ -2254,7 +2226,8 @@
<td> </td>
</tr>
<tr>
- <td><a href="types.html#DataTypeTime"><time></a></td>
+ <th><a
+ href="types.html#DataTypeFrequency"><frequency></a></th>
<td>no</td>
<td>no</td>
<td>no</td>
@@ -2263,18 +2236,26 @@
<td> </td>
</tr>
<tr>
- <td><a
- href="types.html#DataTypeTransformList"><transform-list></a></td>
+ <th><a
+ href="types.html#DataTypeInteger"><integer></a></th>
+ <td>yes</td>
+ <td>yes</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>
+ <td> </td>
</tr>
<tr>
- <td><a href="types.html#DataTypeIRI"><iri></a></td>
+ <th><a><length></a></th>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <th><a href="types.html#DataTypeList"><list-of-<var>T</var>s></a></th>
<td>no</td>
<td>yes</td>
<td>yes</td>
@@ -2283,8 +2264,54 @@
<td> </td>
</tr>
<tr>
- <td>All other data types used in animatable attributes and
- properties</td>
+ <th><a><number></a></th>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <th><a
+ href="types.html#DataTypePaint"><paint></a></th>
+ <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>
+ <th><a><percentage></a></th>
+ <td>yes</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <th><a href="types.html#DataTypeTime"><time></a></th>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <th><a href="types.html#DataTypeIRI"><iri></a></th>
+ <td>no</td>
+ <td>yes</td>
+ <td>yes</td>
+ <td>no</td>
+ <td>no</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <th>All other data types used in animatable attributes and
+ properties</th>
<td>no</td>
<td>yes</td>
<td>yes</td>
@@ -2302,6 +2329,7 @@
<h2 id="DOMAnimationExample">Animation using the SVG DOM</h2>
+<div class="example">
<p><span class="example-ref">Example dom01</span> shows a simple animation
using the DOM.</p>
@@ -2342,6 +2370,7 @@
</svg>
]]></pre>
+<div class="figure">
<table summary="Example dom01">
<caption align="bottom">
Example dom01
@@ -2363,6 +2392,7 @@
class="table-heading-1">At five seconds</span></td>
</tr>
</table>
+</div>
<p class="view-as-svg"><a href="images/animate/dom01.svg">View
this example as SVG (SVG-enabled browsers only)</a></p>
@@ -2401,6 +2431,7 @@
element whose attributes get changed during the
animation.</li>
</ul>
+</div>
<p>If scripts are modifying the same attributes or properties
that are being animated by SVG's