- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Fri, 27 Sep 2013 00:20:46 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/fdd91ca91fa6
branches:
changeset: 542:fdd91ca91fa6
user: Cameron McCormack <cam@mcc.id.au>
date: Fri Sep 27 17:18:22 2013 +1000
description:
Use new-style attribute definition boxes in Animation chapter.
diffstat:
master/animate.html | 2270 +++++++++++++++++++++++++++++---------------------
1 files changed, 1299 insertions(+), 971 deletions(-)
diffs (2410 lines):
diff --git a/master/animate.html b/master/animate.html
--- a/master/animate.html
+++ b/master/animate.html
@@ -343,121 +343,161 @@ 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>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="HrefAttribute"><span class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd><p>An <a>IRI
- reference</a> to the element which is the target of this
- animation and which therefore will be modified over
- time.</p>
- <p>The target element must be part of the <a>current
- SVG document fragment</a>.</p>
- <p><iri> must point to exactly one target element which
- is capable of being the target of the given animation. If
- <iri> points to multiple target elements, if the
- given target element is not capable of being a target of
- the given animation, or if the given target element is not
- part of the current SVG document fragment, then the
- document is in error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).</p>
- <p>If the <a>'xlink:href'</a> attribute
- is not provided, then the target element will be the
- immediate parent element of the current animation
- element.</p>
- <p>Refer to the descriptions of the individual animation
- elements for any restrictions on what types of elements can
- be targets of particular types of animations.</p>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: Specifying the animation target</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="HrefAttribute">xlink:href</dfn></td>
+ <td><a><iri></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>An <a>IRI reference</a> to the element which is the target of this
+ animation and which therefore will be modified over
+ time.</p>
+ <p>The target element must be part of the <a>current
+ SVG document fragment</a>.</p>
+ <p><iri> must point to exactly one target element which
+ is capable of being the target of the given animation. If
+ <iri> points to multiple target elements, if the
+ given target element is not capable of being a target of
+ the given animation, or if the given target element is not
+ part of the current SVG document fragment, then the
+ document is in error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).</p>
+ <p>If the <a>'xlink:href'</a> attribute
+ is not provided, then the target element will be the
+ immediate parent element of the current animation
+ element.</p>
+ <p>Refer to the descriptions of the individual animation
+ elements for any restrictions on what types of elements can
+ be targets of particular types of animations.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
+ </dd>
+</dl>
<h3 id="TargetAttributes">Attributes to identify the target attribute or property for an animation</h3>
<p>The following attributes are the <dfn id='animation-attribute-target-attributes'>animation attribute target attributes</dfn>,
which identify the target attribute or property for the given
<a href="animate.html#TargetElement">target element</a> whose value changes
over time.</p>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AttributeNameAttribute"><span class='adef'>attributeName</span>
- = "<span class='attr-value'><attributeName></span>"</dt>
- <dd><p>Specifies the name of the target attribute. An XMLNS
- prefix may be used to indicate the XML namespace for the
- attribute. The prefix will be interpreted in the scope of
- the current (i.e., the referencing) animation
- element.</p>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: Specifying the animation target</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p></dd>
- <dt id="AttributeTypeAttribute"><span class='adef'>attributeType</span>
- = "<span class='attr-value'>CSS | XML | auto</span>"</dt>
- <dd>
- <p>Specifies the namespace in which the target attribute and
- its associated values are defined. The attribute value is
- one of the following (values are case-sensitive):</p>
- <dl>
- <dt><span class='attr-value'>CSS</span></dt>
- <dd>This specifies that the value of <a>'attributeName'</a> is
- the name of a CSS property defined as animatable in
- this specification.</dd>
- <dt><span class='attr-value'>XML</span></dt>
- <dd>This specifies that the value of <a>'attributeName'</a> is
- the name of an XML attribute defined in the default XML
- namespace for the target element. If the value for
- <a>'attributeName'</a> has an XMLNS prefix, the
- implementation must use the associated namespace as
- defined in the scope of the target element. The
- attribute must be defined as animatable in this
- specification.</dd>
- <dt><span class='attr-value'>auto</span></dt>
- <dd>The implementation should match the
- <a>'attributeName'</a> to an attribute for the
- target element. The implementation must first search
- through the list of CSS properties for a matching
- property name, and if none is found, search the default
- XML namespace for the element.</dd>
- </dl>
- <p>The default value is <span class='attr-value'>'auto'</span>.</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: Specifying the animation target</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
- </dd>
- </dl>
- </div>
-
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AttributeNameAttribute">attributeName</dfn></td>
+ <td><a><XML-Name></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the name of the target attribute. An XMLNS
+ prefix may be used to indicate the XML namespace for the
+ attribute. The prefix will be interpreted in the scope of
+ the current (i.e., the referencing) animation
+ element.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AttributeTypeAttribute">attributeType</dfn></td>
+ <td>CSS | XML | auto</td>
+ <td>auto</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the namespace in which the target attribute and
+ its associated values are defined. The attribute value is
+ one of the following (values are case-sensitive):</p>
+ <dl>
+ <dt><span class='attr-value'>CSS</span></dt>
+ <dd>This specifies that the value of <a>'attributeName'</a> is
+ the name of a CSS property defined as animatable in
+ this specification.</dd>
+ <dt><span class='attr-value'>XML</span></dt>
+ <dd>This specifies that the value of <a>'attributeName'</a> is
+ the name of an XML attribute defined in the default XML
+ namespace for the target element. If the value for
+ <a>'attributeName'</a> has an XMLNS prefix, the
+ implementation must use the associated namespace as
+ defined in the scope of the target element. The
+ attribute must be defined as animatable in this
+ specification.</dd>
+ <dt><span class='attr-value'>auto</span></dt>
+ <dd>The implementation should match the
+ <a>'attributeName'</a> to an attribute for the
+ target element. The implementation must first search
+ through the list of CSS properties for a matching
+ property name, and if none is found, search the default
+ XML namespace for the element.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: Specifying the animation target</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.1).</p>
+ </dd>
+</dl>
<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
@@ -604,368 +644,453 @@ the animation once the animation ends.</
<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>
- <dt id="BeginAttribute"><span class='adef'>begin</span> =
- "<span class='attr-value'><a href="#BeginValueListSyntax">begin-value-list</a></span>"</dt>
- <dd>
- <p>Defines when the element should begin (i.e. become
- active).</p>
- <p>The attribute value is a semicolon separated list of
- values.</p>
-
- <dl>
- <dt id="BeginValueListSyntax">begin-value-list ::= <a
- href="#BeginValueSyntax">begin-value</a> (S? ";" S?
- begin-value-list )?</dt>
- <dd>A semicolon separated list of begin values. The
- interpretation of a list of begin times is detailed in
- SMIL Animation's section on <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">
- "Evaluation of begin and end time lists"</a>.</dd>
- <dt id="BeginValueSyntax">begin-value ::= ( <a
- href="#OffsetValueSyntax">offset-value</a> | <a
- href="#SyncbaseValueSyntax">syncbase-value</a> | <a
- href="#EventValueSyntax">event-value</a> | <a
- href="#RepeatValueSyntax">repeat-value</a> | <a
- href="#AccessKeyValueSyntax">accessKey-value</a> | <a
- href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
- | <a href="#IndefiniteValue">"indefinite"</a> )</dt>
- <dd>Describes the element begin.</dd>
- <dt id="OffsetValueSyntax">offset-value ::= ( S? "+" |
- "-" S? )? ( <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )</dt>
- <dd>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.</dd>
- <dt id="SyncbaseValueSyntax">syncbase-value ::= (
- Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>Describes a <dfn>syncbase</dfn>
- and an optional offset from that syncbase. The element
- begin is defined relative to the begin or active end of
- another animation. A syncbase consists of an ID
- reference to another animation element followed by
- either <code>begin</code> or <code>end</code> to
- identify whether to synchronize with the beginning or
- active end of the referenced animation element.</dd>
- <dt id="EventValueSyntax">event-value ::= ( Id-value
- "." )? ( event-ref ) ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>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 the <a
- href="interact.html">Interactivity</a> 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 in <a href="interact.html#SVGEvents">Complete
- list of supported events</a>. Details of event-based
- timing are described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Unifying">
- SMIL Animation: Unifying Event-based and Scheduled
- Timing</a>.</dd>
- <dt id="RepeatValueSyntax">repeat-value ::= ( Id-value
- "." )? "repeat(" integer ")" ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>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.</dd>
- <dt id="AccessKeyValueSyntax">accessKey-value ::=
- "accessKey(" character ")" ( S? ("+"|"-") S? <a
- href="animate.html#ClockValueSyntax">Clock-value</a>
- )?</dt>
- <dd>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.</dd>
- <dt id="WallclockSyncValueSyntax">wallclock-sync-value ::= "wallclock(" wallclock-value
- ")"</dt>
- <dd>Describes the element begin as a real-world clock
- time. The wallclock time syntax is based upon syntax
- defined in <cite>Representation of dates and times</cite>
- [<a href="refs.html#ref-ISO8601">ISO8601</a>].</dd>
- <dt id="IndefiniteValue">"indefinite"</dt>
- <dd><p>The begin of the animation will be determined by a
- "beginElement()" method call or a hyperlink targeted to
- the element.</p>
- <p>The animation DOM methods are described in <a
- href="#DOMInterfaces">DOM interfaces</a>.</p>
- <p>Hyperlink-based timing is described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#HyperlinkSemantics">
- SMIL Animation: Hyperlinks and timing</a>.</p></dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
- SMIL Animation: 'begin' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
- </dd>
-
- <dt id="DurAttribute"><span class='adef'>dur</span> =
- <span class='attr-value'><a href="#ClockValueSyntax">Clock-value</a> | "media" | "indefinite"</span></dt>
- <dd>
- <p>Specifies the simple duration.</p>
- <p>The attribute value can be one of the following:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd>Specifies the length of the simple duration in <a
- href="#PresentationTime">presentation time</a>. Value
- must be greater than 0.</dd>
- <dt>"media"</dt>
- <dd>Specifies the simple duration as the intrinsic
- media duration. This is only valid for elements that
- define media.<br />
- (For SVG's <a href="#AnimationElements">animation elements</a>, if <span
- class="attr-value">'media'</span> is specified, the
- attribute will be ignored.)</dd>
- <dt>"indefinite"</dt>
- <dd>Specifies the simple duration as indefinite.</dd>
- </dl>
- <p>If the animation does not have a <a>'dur'</a> 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 <a>'set'</a> elements). Except
- for any SVG-specific rules explicitly mentioned in this
- specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#DurAttribute">
- SMIL Animation: 'dur' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
- </dd>
-
- <dt id="EndAttribute"><span class='adef'>end</span> = "<span class='attr-value'><a
- href="#EndValueListSyntax">end-value-list</a></span>"</dt>
- <dd>
- <p>Defines an end value for the animation that can constrain
- the active duration. The attribute value is a semicolon
- separated list of values.</p>
-
- <dl>
- <dt id="EndValueListSyntax">end-value-list ::= <a
- href="#EndValueSyntax">end-value</a> (S? ";" S?
- end-value-list )?</dt>
- <dd>A semicolon separated list of end values. The
- interpretation of a list of end times is detailed
- below.</dd>
- </dl>
-
- <dl>
- <dt id="EndValueSyntax">end-value ::= ( <a
- href="#OffsetValueSyntax">offset-value</a> | <a
- href="#SyncbaseValueSyntax">syncbase-value</a> | <a
- href="#EventValueSyntax">event-value</a> | <a
- href="#RepeatValueSyntax">repeat-value</a> | <a
- href="#AccessKeyValueSyntax">accessKey-value</a> | <a
- href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
- | "indefinite" )</dt>
- <dd>Describes the active end of the animation.</dd>
- </dl>
- <p>A value of <span class="attr-value">'indefinite'</span>
- specifies that the end of the animation will be
- determined by an <a>SVGAnimationElement::endElement</a> method call (the animation
- DOM methods are described in <a href="#DOMInterfaces">DOM
- interfaces</a>).</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
- specification.
- In particular, see <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#EndActiveAttribute">
- SMIL Animation: 'end' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.2).</p>
- </dd>
- <dt id="MinAttribute"><span class='adef'>min</span> = <span class='attr-value'><a
- href="#ClockValueSyntax">Clock-value</a> | "media"</span></dt>
- <dd>
- <p>Specifies the minimum value of the active duration.</p>
- <p>The attribute value can be either of the following:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd><p>Specifies the length of the minimum value of the
- active duration, measured in local time.</p>
- <p>Value must be greater than 0.</p></dd>
- <dt>"media"</dt>
- <dd>Specifies the minimum value of the active duration
- as the intrinsic media duration. This is only valid for
- elements that define media. (For SVG's <a href="#AnimationElements">animation elements</a>,
- if <span class="attr-value">'media'</span> is specified, the
- attribute will be ignored.)</dd>
- </dl>
- <p>The default value for <a>'min'</a>
- is <span class='attr-value'>'0'</span>. This does not constrain the active duration at
- all.</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: 'min' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
- </dd>
- <dt id="MaxAttribute"><span class='adef'>max</span> = <span class='attr-value'><a
- href="#ClockValueSyntax">Clock-value</a> | "media"</span></dt>
- <dd>
- <p>Specifies the maximum value of the active duration.</p>
- <p>The attribute value can be either of the following:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd><p>Specifies the length of the maximum value of the
- active duration, measured in local time.</p>
- <p>Value must be greater than 0.</p></dd>
- <dt>"media"</dt>
- <dd>Specifies the maximum value of the active duration
- as the intrinsic media duration. This is only valid for
- elements that define media. (For SVG's
- <a href="#AnimationElements">animation elements</a>, if <span
- class="attr-value">'media'</span> is specified, the
- attribute will be ignored.)</dd>
- </dl>
- <p>There is no default value for <a>'max'</a>. This does not constrain the
- active duration at all.</p>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: 'max' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
- </dd>
- <dt id="RestartAttribute"><span class='adef'>restart</span> =
- <span class='attr-value'>"always" | "whenNotActive" | "never"</span></dt>
- <dd>
- <dl>
- <dt><span class='attr-value'>always</span></dt>
- <dd>The animation can be restarted at any
- time. <br />
- This is the default value.</dd>
- <dt><span class='attr-value'>whenNotActive</span></dt>
- <dd>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.</dd>
- <dt><span class='attr-value'>never</span></dt>
- <dd>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.)</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RestartAttribute">SMIL Animation: 'restart' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.7).</p>
- </dd>
- <dt id="RepeatCountAttribute"><span class='adef'>repeatCount</span> =
- <span class='attr-value'>numeric value | "indefinite"</span></dt>
- <dd>
- <p>Specifies the number of iterations of the animation
- function. It can have the following attribute values:</p>
- <dl>
- <dt>numeric value</dt>
- <dd>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 <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationFunction">
- simple duration</a>. Values must be greater than
- 0.</dd>
- <dt>"indefinite"</dt>
- <dd>The animation is defined to repeat indefinitely
- (i.e. until the document ends).</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatCountAttribute">SMIL Animation: 'repeatCount' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
- </dd>
- <dt id="RepeatDurAttribute"><span class='adef'>repeatDur</span> =
- <span class='attr-value'><a href="#ClockValueSyntax">Clock-value</a> |
- "indefinite"</span></dt>
- <dd>
- <p>Specifies the total duration for repeat. It can have the
- following attribute values:</p>
- <dl>
- <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
- <dd>Specifies the duration in <a
- href="#PresentationTime">presentation time</a> to
- repeat the animation function
- <code><strong>f(t)</strong></code>.</dd>
- <dt>"indefinite"</dt>
- <dd>The animation is defined to repeat indefinitely
- (i.e. until the document ends).</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatDurAttribute">SMIL Animation: 'repeatDur' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
- </dd>
- <dt id="FillAttribute"><span class='adef'>fill</span> =
- <span class='attr-value'>"freeze" | "remove"</span></dt>
- <dd>
- <p>This attribute can have the following values:</p>
- <dl>
- <dt><span class='attr-value'>freeze</span></dt>
- <dd>The animation effect <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">
- F(t)</a> 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 <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
- SMIL Animation: Restarting animation</a>).</dd>
- <dt><span class='attr-value'>remove</span></dt>
- <dd><p>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 <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
- SMIL Animation: Restarting animation</a>).</p>
- <p>This is the default value.</p></dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FillAttribute">SMIL Animation: 'fill' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.5).</p>
- </dd>
- </dl>
-
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="BeginAttribute">begin</dfn></td>
+ <td><a href="#BeginValueListSyntax">begin-value-list</a></td>
+ <td>0s</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Defines when the element should begin (i.e. become
+ active).</p>
+ <p>The attribute value is a semicolon separated list of
+ values.</p>
+
+ <dl>
+ <dt id="BeginValueListSyntax">begin-value-list ::= <a
+ href="#BeginValueSyntax">begin-value</a> (S? ";" S?
+ begin-value-list )?</dt>
+ <dd>A semicolon separated list of begin values. The
+ interpretation of a list of begin times is detailed in
+ SMIL Animation's section on <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-EvaluationOfBeginEndTimeLists">
+ "Evaluation of begin and end time lists"</a>.</dd>
+ <dt id="BeginValueSyntax">begin-value ::= ( <a
+ href="#OffsetValueSyntax">offset-value</a> | <a
+ href="#SyncbaseValueSyntax">syncbase-value</a> | <a
+ href="#EventValueSyntax">event-value</a> | <a
+ href="#RepeatValueSyntax">repeat-value</a> | <a
+ href="#AccessKeyValueSyntax">accessKey-value</a> | <a
+ href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
+ | <a href="#IndefiniteValue">"indefinite"</a> )</dt>
+ <dd>Describes the element begin.</dd>
+ <dt id="OffsetValueSyntax">offset-value ::= ( S? "+" |
+ "-" S? )? ( <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )</dt>
+ <dd>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.</dd>
+ <dt id="SyncbaseValueSyntax">syncbase-value ::= (
+ Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>Describes a <dfn>syncbase</dfn>
+ and an optional offset from that syncbase. The element
+ begin is defined relative to the begin or active end of
+ another animation. A syncbase consists of an ID
+ reference to another animation element followed by
+ either <code>begin</code> or <code>end</code> to
+ identify whether to synchronize with the beginning or
+ active end of the referenced animation element.</dd>
+ <dt id="EventValueSyntax">event-value ::= ( Id-value
+ "." )? ( event-ref ) ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>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 the <a
+ href="interact.html">Interactivity</a> 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 in <a href="interact.html#SVGEvents">Complete
+ list of supported events</a>. Details of event-based
+ timing are described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Unifying">
+ SMIL Animation: Unifying Event-based and Scheduled
+ Timing</a>.</dd>
+ <dt id="RepeatValueSyntax">repeat-value ::= ( Id-value
+ "." )? "repeat(" integer ")" ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>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.</dd>
+ <dt id="AccessKeyValueSyntax">accessKey-value ::=
+ "accessKey(" character ")" ( S? ("+"|"-") S? <a
+ href="animate.html#ClockValueSyntax">Clock-value</a>
+ )?</dt>
+ <dd>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.</dd>
+ <dt id="WallclockSyncValueSyntax">wallclock-sync-value ::= "wallclock(" wallclock-value
+ ")"</dt>
+ <dd>Describes the element begin as a real-world clock
+ time. The wallclock time syntax is based upon syntax
+ defined in <cite>Representation of dates and times</cite>
+ [<a href="refs.html#ref-ISO8601">ISO8601</a>].</dd>
+ <dt id="IndefiniteValue">"indefinite"</dt>
+ <dd><p>The begin of the animation will be determined by a
+ "beginElement()" method call or a hyperlink targeted to
+ the element.</p>
+ <p>The animation DOM methods are described in <a
+ href="#DOMInterfaces">DOM interfaces</a>.</p>
+ <p>Hyperlink-based timing is described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#HyperlinkSemantics">
+ SMIL Animation: Hyperlinks and timing</a>.</p></dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationTarget">
+ SMIL Animation: 'begin' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="DurAttribute">dur</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "media" | "indefinite"</td>
+ <td>indefinite</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the simple duration.</p>
+ <p>The attribute value can be one of the following:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd>Specifies the length of the simple duration in <a
+ href="#PresentationTime">presentation time</a>. Value
+ must be greater than 0.</dd>
+ <dt>"media"</dt>
+ <dd>Specifies the simple duration as the intrinsic
+ media duration. This is only valid for elements that
+ define media.<br />
+ (For SVG's <a href="#AnimationElements">animation elements</a>, if <span
+ class="attr-value">'media'</span> is specified, the
+ attribute will be ignored.)</dd>
+ <dt>"indefinite"</dt>
+ <dd>Specifies the simple duration as indefinite.</dd>
+ </dl>
+ <p>If the animation does not have a <a>'dur'</a> 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 <a>'set'</a> elements). Except
+ for any SVG-specific rules explicitly mentioned in this
+ specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#DurAttribute">
+ SMIL Animation: 'dur' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="EndAttribute">end</dfn></td>
+ <td><a href="#EndValueListSyntax">end-value-list</a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Defines an end value for the animation that can constrain
+ the active duration. The attribute value is a semicolon
+ separated list of values.</p>
+
+ <dl>
+ <dt id="EndValueListSyntax">end-value-list ::= <a
+ href="#EndValueSyntax">end-value</a> (S? ";" S?
+ end-value-list )?</dt>
+ <dd>A semicolon separated list of end values. The
+ interpretation of a list of end times is detailed
+ below.</dd>
+ </dl>
+
+ <dl>
+ <dt id="EndValueSyntax">end-value ::= ( <a
+ href="#OffsetValueSyntax">offset-value</a> | <a
+ href="#SyncbaseValueSyntax">syncbase-value</a> | <a
+ href="#EventValueSyntax">event-value</a> | <a
+ href="#RepeatValueSyntax">repeat-value</a> | <a
+ href="#AccessKeyValueSyntax">accessKey-value</a> | <a
+ href="#WallclockSyncValueSyntax">wallclock-sync-value</a>
+ | "indefinite" )</dt>
+ <dd>Describes the active end of the animation.</dd>
+ </dl>
+ <p>A value of <span class="attr-value">'indefinite'</span>
+ specifies that the end of the animation will be
+ determined by an <a>SVGAnimationElement::endElement</a> method call (the animation
+ DOM methods are described in <a href="#DOMInterfaces">DOM
+ interfaces</a>).</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a>
+ specification.
+ In particular, see <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#EndActiveAttribute">
+ SMIL Animation: 'end' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.2).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="MinAttribute">min</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "media"</td>
+ <td>0s</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td><dfn id="MaxAttribute">max</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "media"</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'min'</a> and <a>'max'</a> attributes specify the minimum and
+ maximum value of the active duration, respectively.</p>
+ <p>The attribute values can be either of the following:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd><p>Specifies the length of the minimum or maximum value of the
+ active duration, measured in local time.</p>
+ <p>Value must be greater than 0.</p></dd>
+ <dt>"media"</dt>
+ <dd>Specifies the minimum value of the active duration
+ as the intrinsic media duration. This is only valid for
+ elements that define media. (For SVG's <a href="#AnimationElements">animation elements</a>,
+ if <span class="attr-value">'media'</span> is specified, the
+ attribute will be ignored.)</dd>
+ </dl>
+ <p>The lacuna value for <a>'min'</a> is <span class='attr-value'>'0'</span> and
+ there is no lacuna value for <a>'max'</a>. In both cases, this does not
+ constrain the active duration at all.</p>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for these
+ attributes is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MinMax">SMIL Animation: The min and max attributes</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RestartAttribute">restart</dfn></td>
+ <td>always | whenNotActive | never</td>
+ <td>always</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <dl>
+ <dt><span class='attr-value'>always</span></dt>
+ <dd>The animation can be restarted at any
+ time. This is the default value.</dd>
+ <dt><span class='attr-value'>whenNotActive</span></dt>
+ <dd>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.</dd>
+ <dt><span class='attr-value'>never</span></dt>
+ <dd>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.)</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RestartAttribute">SMIL Animation: 'restart' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.7).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RepeatCountAttribute">repeatCount</dfn></td>
+ <td><a><number></a> | indefinite</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the number of iterations of the animation
+ function. It can have the following attribute values:</p>
+ <dl>
+ <dt><a><number></a></dt>
+ <dd>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 <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#SpecifyingAnimationFunction">
+ simple duration</a>. Values must be greater than
+ 0.</dd>
+ <dt>indefinite</dt>
+ <dd>The animation is defined to repeat indefinitely
+ (i.e. until the document ends).</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatCountAttribute">SMIL Animation: 'repeatCount' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RepeatDurAttribute">repeatDur</dfn></td>
+ <td><a href="#ClockValueSyntax">Clock-value</a> | "indefinite"</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the total duration for repeat. It can have the
+ following attribute values:</p>
+ <dl>
+ <dt><a href="#ClockValueSyntax">Clock-value</a></dt>
+ <dd>Specifies the duration in <a
+ href="#PresentationTime">presentation time</a> to
+ repeat the animation function
+ <code><strong>f(t)</strong></code>.</dd>
+ <dt>"indefinite"</dt>
+ <dd>The animation is defined to repeat indefinitely
+ (i.e. until the document ends).</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#RepeatDurAttribute">SMIL Animation: 'repeatDur' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="FillAttribute">fill</dfn></td>
+ <td>freeze | remove</td>
+ <td>remove</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>This attribute can have the following values:</p>
+ <dl>
+ <dt><span class='attr-value'>freeze</span></dt>
+ <dd>The animation effect <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimationModel">
+ F(t)</a> 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 <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
+ SMIL Animation: Restarting animation</a>).</dd>
+ <dt><span class='attr-value'>remove</span></dt>
+ <dd><p>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 <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart">
+ SMIL Animation: Restarting animation</a>).</p></dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FillAttribute">SMIL Animation: 'fill' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.5).</p>
+ </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>
@@ -1030,354 +1155,422 @@ Thus:</p>
<p>The following attributes are the <dfn id='animation-value-attributes'>animation value attributes</dfn>.
They are common to elements <edit:elementswithattributecategory name='animation value'/>. These
attributes define the values that are assigned to the target
attribute or property over time. The attributes below provide
control over the relative timing of keyframes and the
interpolation method between discrete values.</p>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="CalcModeAttribute"><span class='adef'>calcMode</span> =
- <span class="attr-value">"discrete | linear | paced | spline"</span></dt>
- <dd>
- <p>Specifies the interpolation mode for the animation. This
- can take any of the following values. The default mode is
- <span class='attr-value'>'linear'</span>, however if the attribute does not support
- linear interpolation (e.g. for strings), the
- <a>'calcMode'</a> attribute is ignored and discrete
- interpolation is used.</p>
- <dl>
- <dt><span class='attr-value'>discrete</span></dt>
- <dd>This specifies that the animation function will
- jump from one value to the next without any
- interpolation.</dd>
- <dt><span class='attr-value'>linear</span></dt>
- <dd>Simple linear interpolation between values is used
- to calculate the animation function. Except for <a>'animateMotion'</a>, this
- is the default <a>'calcMode'</a>.</dd>
- <dt><span class='attr-value'>paced</span></dt>
- <dd>
- 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 in <a href="#complexDistances">Paced animation and complex types</a>.
- If <span class='attr-value'>'paced'</span> is specified, any
- <a>'keyTimes'</a> or <a>'keySplines'</a> will
- be ignored. For <a>'animateMotion'</a>, this
- is the default <a>'calcMode'</a>.
- 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.</dd>
- <dt><span class='attr-value'>spline</span></dt>
- <dd>Interpolates from one value in the
- <a>'values'</a> 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
- <a>'keyTimes'</a> attribute, and the control points
- for each interval are defined in the
- <a>'keySplines'</a> attribute.</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#CalcModeAttribute">SMIL Animation: 'calcMode' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
- </dd>
- <dt id="ValuesAttribute"><span class='adef'>values</span> =
- <span class='attr-value'>"<list>"</span></dt>
- <dd>A semicolon-separated list of one or more values.
- Vector-valued attributes are supported using the vector
- syntax of the <a>'attributeType'</a> domain. Per the SMIL
- specification, leading and trailing white space,
- and white space before and after semicolon separators,
- is allowed and will be ignored. Except for
- any SVG-specific rules explicitly mentioned in this
- specification, the normative definition for this attribute
- is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ValuesAttribute">SMIL Animation: 'values' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
- <dt id="KeyTimesAttribute"><span class='adef'>keyTimes</span> =
- <span class='attr-value'>"<list>"</span></dt>
- <dd>
- <p>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 <a>'values'</a>
- attribute list, and defines when the value is used in the
- animation function. Each time value in the
- <a>'keyTimes'</a> 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.</p>
-
- <p>For animations specified with a <a>'values'</a> list, the
- <a>'keyTimes'</a> attribute if specified must have exactly as many
- values as there are in the <a>'values'</a> attribute. For from/to/by
- animations, the <a>'keyTimes'</a> attribute if specified must have
- two values.</p>
-
- <p>Each successive time value must be greater than or equal
- to the preceding time value.</p>
-
- <p>The <a>'keyTimes'</a> list semantics depends upon
- the interpolation mode:</p>
- <ul>
- <li>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.</li>
- <li>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
- <a>'keyTimes'</a>.</li>
- </ul>
- <p>If the interpolation mode is <span class='attr-value'>'paced'</span>, the
- <a>'keyTimes'</a> attribute is ignored.</p>
-
- <p>If there are any errors in the <a>'keyTimes'</a>
- specification (bad values, too many or too few values),
- the document fragment is in error (see <a
- href="implnote.html#ErrorProcessing">error
- processing</a>).</p>
-
- <p>If the simple duration is indefinite, any
- <a>'keyTimes'</a> specification will be
- ignored.</p>
-
- <p>
- Because paced animation interpolation is unspecified for some
- value types, authors are encouraged to use
- <span class="attr-value">'linear'</span> animation interpolation with
- calculated <a>'keyTimes'</a>
- to achieve particular interpolation behavior for these types.
- </p>
-
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeyTimesAttribute">SMIL Animation: 'keyTimes' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
- </dd>
- <dt id="KeySplinesAttribute"><span class='adef'>keySplines</span> =
- <span class='attr-value'>"<list>"</span></dt>
- <dd><p>A set of Bézier control points associated with
- the <a>'keyTimes'</a> list, defining a cubic
- Bézier function that controls interval pacing. The
- attribute value is a semicolon-separated list of control
- point descriptions. Each control point description is a set
- of four values: <code>x1 y1 x2 y2</code>, describing the
- Bézier control points for one time segment. Note:
- <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-animation.html#adef-keySplines">SMIL</a>
- allows these values to be separated either by commas with
- optional whitespace, or by whitespace alone. The
- <a>'keyTimes'</a> values that define the associated
- segment are the Bézier "anchor points", and the
- <a>'keySplines'</a> values are the control points.
- Thus, there must be one fewer sets of control points than
- there are <a>'keyTimes'</a>.</p>
-
- <p>The values must all be in the range 0 to 1.</p>
-
- <p>This attribute is ignored unless the <a>'calcMode'</a>
- is set to <span class='attr-value'>'spline'</span>.</p>
-
- <p>If there are any errors in the <a>'keySplines'</a>
- specification (bad values, too many or too few values), the
- document fragment is in error (see <a
- href="implnote.html#ErrorProcessing">error
- processing</a>).</p>
-
- <p>Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeySplinesAttribute">SMIL Animation: 'keySplines' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p></dd>
-
- <dt id="FromAttribute"><span class='adef'>from</span> =
- <span class='attr-value'>"<value>"</span></dt>
- <dd>Specifies the starting value of the animation.<br />
- Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromAttribute">SMIL Animation: 'from' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
-
- <dt id="ToAttribute"><span class='adef'>to</span> =
- <span class='attr-value'>"<value>"</span></dt>
- <dd>Specifies the ending value of the animation.<br />
- Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ToAttribute">SMIL Animation: 'to' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</dd>
-
- <dt id="ByAttribute"><span class='adef'>by</span> =
- <span class='attr-value'>"<value>"</span></dt>
- <dd>Specifies a relative offset value for the
- animation.<br />
- Except for any SVG-specific rules explicitly mentioned in
- this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ByAttribute">SMIL Animation: 'by' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</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>
- <p>The animation values specified in the animation element
- must be legal values for the specified attribute. Leading and
- trailing white space, and white space before and after
- semicolon separators, will be ignored.</p>
- <p>All values specified must be legal values for the
- specified attribute (as defined in the associated namespace).
- If any values are not legal, the document fragment is in
- error (see <a href="implnote.html#ErrorProcessing">error
- processing</a>).</p>
- <p>If a list of values is used, the animation will apply the
- values in order over the course of the animation. If a list
- of <a>'values'</a> is specified, any <a>'from'</a>,
- <a>'to'</a> and <a>'by'</a> attribute values are ignored.</p>
- <p>The processing rules for the variants of
- <em>from/by/to</em> animations are described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncValues">
- Animation function values</a> with the following exception.</p>
- <p>In order to provide behavior that is intuitive and consistent
- between discrete animations with an explicitly specified
- <a>'from'</a> attribute (e.g. "from-to animation") and those
- where the underlying value is used (e.g. "to animation"), the
- behavior of discrete to-animation in SVG deviates from the
- definition in SMIL Animation.
- As with a discrete from-to animation, a discrete to animation
- will set the underlying value for the first half of the simple
- duration (or, if a <a>'keyTimes'</a> list is provided, until the
- simple duration specified by the second value in the <a>'keyTimes'</a>
- list) and the <a>'to'</a> value for the remainder of the simple
- duration.</p>
- <p>The following figure illustrates the interpretation of the
- <a>'keySplines'</a> attribute. Each diagram illustrates
- the effect of <a>'keySplines'</a> settings for a single
- interval (i.e. between the associated pairs of values in the
- <a>'keyTimes'</a> and <a>'values'</a> lists.). The
- horizontal axis can be thought of as the input value for the
- <em>unit progress</em> of interpolation within the interval -
- i.e. the pace with which interpolation proceeds along the
- given interval. The vertical axis is the resulting value for
- the <em>unit progress</em>, yielded by the function that
- the <a>'keySplines'</a> attribute defines.
- Another way of describing
- this is that the horizontal axis is the input <em>unit
- time</em> for the interval, and the vertical axis is the
- 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 style="border-collapse:separate; border-spacing: 20px;">
- <caption>
- Examples of <span class="attr-name">keySplines</span>
- </caption>
- <tr>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of 0 0 1 1 (the default)"
- src="images/animate/keySplines01.svg" /> <span
- class="table-heading-1">keySplines="0 0 1 1"
- (the default)</span></td>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of .5 0 .5 1"
- src="images/animate/keySplines02.svg" /> <span
- class="table-heading-1">keySplines=".5 0 .5 1"</span></td>
- </tr>
- <tr>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of 0 .75 .25 1"
- src="images/animate/keySplines03.svg" /> <span
- class="table-heading-1">keySplines="0 .75 .25 1"</span></td>
- <td><img class="bordered" width="250" height="250"
- alt="Example keySplines01 - keySplines of 1 0 .25 .25"
- src="images/animate/keySplines04.svg" /><span
- class="table-heading-1">keySplines="1 0 .25 .25"</span></td>
- </tr>
- </table>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="CalcModeAttribute">calcMode</dfn></td>
+ <td>discrete | linear | paced | spline</td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the interpolation mode for the animation. This
+ can take any of the following values. The default mode is
+ <span class='attr-value'>'linear'</span>, however if the attribute does not support
+ linear interpolation (e.g. for strings), the
+ <a>'calcMode'</a> attribute is ignored and discrete
+ interpolation is used.</p>
+ <dl>
+ <dt><span class='attr-value'>discrete</span></dt>
+ <dd>This specifies that the animation function will
+ jump from one value to the next without any
+ interpolation.</dd>
+ <dt><span class='attr-value'>linear</span></dt>
+ <dd>Simple linear interpolation between values is used
+ to calculate the animation function. Except for <a>'animateMotion'</a>, this
+ is the default <a>'calcMode'</a>.</dd>
+ <dt><span class='attr-value'>paced</span></dt>
+ <dd>
+ 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 in <a href="#complexDistances">Paced animation and complex types</a>.
+ If <span class='attr-value'>'paced'</span> is specified, any
+ <a>'keyTimes'</a> or <a>'keySplines'</a> will
+ be ignored. For <a>'animateMotion'</a>, this
+ is the default <a>'calcMode'</a>.
+ 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.</dd>
+ <dt><span class='attr-value'>spline</span></dt>
+ <dd>Interpolates from one value in the
+ <a>'values'</a> 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
+ <a>'keyTimes'</a> attribute, and the control points
+ for each interval are defined in the
+ <a>'keySplines'</a> attribute.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#CalcModeAttribute">SMIL Animation: 'calcMode' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="ValuesAttribute">values</dfn></td>
+ <td><list></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>A semicolon-separated list of one or more values.
+ Vector-valued attributes are supported using the vector
+ syntax of the <a>'attributeType'</a> domain. Per the SMIL
+ specification, leading and trailing white space,
+ and white space before and after semicolon separators,
+ is allowed and will be ignored. Except for
+ any SVG-specific rules explicitly mentioned in this
+ specification, the normative definition for this attribute
+ is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#ValuesAttribute">SMIL Animation: 'values' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="KeyTimesAttribute">keyTimes</dfn></td>
+ <td><list></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>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 <a>'values'</a>
+ attribute list, and defines when the value is used in the
+ animation function. Each time value in the
+ <a>'keyTimes'</a> 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.</p>
+
+ <p>For animations specified with a <a>'values'</a> list, the
+ <a>'keyTimes'</a> attribute if specified must have exactly as many
+ values as there are in the <a>'values'</a> attribute. For from/to/by
+ animations, the <a>'keyTimes'</a> attribute if specified must have
+ two values.</p>
+
+ <p>Each successive time value must be greater than or equal
+ to the preceding time value.</p>
+
+ <p>The <a>'keyTimes'</a> list semantics depends upon
+ the interpolation mode:</p>
+ <ul>
+ <li>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.</li>
+ <li>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
+ <a>'keyTimes'</a>.</li>
+ </ul>
+ <p>If the interpolation mode is <span class='attr-value'>'paced'</span>, the
+ <a>'keyTimes'</a> attribute is ignored.</p>
+
+ <p>If there are any errors in the <a>'keyTimes'</a>
+ specification (bad values, too many or too few values),
+ the document fragment is in error (see <a
+ href="implnote.html#ErrorProcessing">error
+ processing</a>).</p>
+
+ <p>If the simple duration is indefinite, any
+ <a>'keyTimes'</a> specification will be
+ ignored.</p>
+
+ <p>
+ Because paced animation interpolation is unspecified for some
+ value types, authors are encouraged to use
+ <span class="attr-value">'linear'</span> animation interpolation with
+ calculated <a>'keyTimes'</a>
+ to achieve particular interpolation behavior for these types.
+ </p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeyTimesAttribute">SMIL Animation: 'keyTimes' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="KeySplinesAttribute">keySplines</dfn></td>
+ <td><list></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>A set of Bézier control points associated with
+ the <a>'keyTimes'</a> list, defining a cubic
+ Bézier function that controls interval pacing. The
+ attribute value is a semicolon-separated list of control
+ point descriptions. Each control point description is a set
+ of four values: <code>x1 y1 x2 y2</code>, describing the
+ Bézier control points for one time segment. Note:
+ <a href="http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-animation.html#adef-keySplines">SMIL</a>
+ allows these values to be separated either by commas with
+ optional whitespace, or by whitespace alone. The
+ <a>'keyTimes'</a> values that define the associated
+ segment are the Bézier "anchor points", and the
+ <a>'keySplines'</a> values are the control points.
+ Thus, there must be one fewer sets of control points than
+ there are <a>'keyTimes'</a>.</p>
+
+ <p>The values must all be in the range 0 to 1.</p>
+
+ <p>This attribute is ignored unless the <a>'calcMode'</a>
+ is set to <span class='attr-value'>'spline'</span>.</p>
+
+ <p>If there are any errors in the <a>'keySplines'</a>
+ specification (bad values, too many or too few values), the
+ document fragment is in error (see <a
+ href="implnote.html#ErrorProcessing">error
+ processing</a>).</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#KeySplinesAttribute">SMIL Animation: 'keySplines' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.3).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="FromAttribute">from</dfn>,
+ <dfn id="ToAttribute">to</dfn>,
+ <dfn id="ByAttribute">by</dfn></td>
+ <td><value></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'from'</a> and <a>'to'</a> attributes specify the starting
+ and ending value of the animation, while the <a>'by'</a> attribute
+ specifies a relative offset value for the animation.</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned in
+ this specification, the normative definition for these
+ attributes is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromAttribute">SMIL Animation: Animation function values</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.2.2).</p>
+ </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>
+
+<p>The animation values specified in the animation element
+must be legal values for the specified attribute. Leading and
+trailing white space, and white space before and after
+semicolon separators, will be ignored.</p>
+
+<p>All values specified must be legal values for the
+specified attribute (as defined in the associated namespace).
+If any values are not legal, the document fragment is in
+error (see <a href="implnote.html#ErrorProcessing">error
+processing</a>).</p>
+
+<p>If a list of values is used, the animation will apply the
+values in order over the course of the animation. If a list
+of <a>'values'</a> is specified, any <a>'from'</a>,
+<a>'to'</a> and <a>'by'</a> attribute values are ignored.</p>
+
+<p>The processing rules for the variants of
+<em>from/by/to</em> animations are described in <a
+href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AnimFuncValues">
+Animation function values</a> with the following exception.</p>
+
+<p>In order to provide behavior that is intuitive and consistent
+between discrete animations with an explicitly specified
+<a>'from'</a> attribute (e.g. "from-to animation") and those
+where the underlying value is used (e.g. "to animation"), the
+behavior of discrete to-animation in SVG deviates from the
+definition in SMIL Animation.
+As with a discrete from-to animation, a discrete to animation
+will set the underlying value for the first half of the simple
+duration (or, if a <a>'keyTimes'</a> list is provided, until the
+simple duration specified by the second value in the <a>'keyTimes'</a>
+list) and the <a>'to'</a> value for the remainder of the simple
+duration.</p>
+
+<p>The following figure illustrates the interpretation of the
+<a>'keySplines'</a> attribute. Each diagram illustrates
+the effect of <a>'keySplines'</a> settings for a single
+interval (i.e. between the associated pairs of values in the
+<a>'keyTimes'</a> and <a>'values'</a> lists.). The
+horizontal axis can be thought of as the input value for the
+<em>unit progress</em> of interpolation within the interval -
+i.e. the pace with which interpolation proceeds along the
+given interval. The vertical axis is the resulting value for
+the <em>unit progress</em>, yielded by the function that
+the <a>'keySplines'</a> attribute defines.
+ Another way of describing
+this is that the horizontal axis is the input <em>unit
+time</em> for the interval, and the vertical axis is the
+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 style="border-collapse:separate; border-spacing: 20px;">
+ <caption>
+ Examples of <span class="attr-name">keySplines</span>
+ </caption>
+ <tr>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of 0 0 1 1 (the default)"
+ src="images/animate/keySplines01.svg" /> <span
+ class="table-heading-1">keySplines="0 0 1 1"
+ (the default)</span></td>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of .5 0 .5 1"
+ src="images/animate/keySplines02.svg" /> <span
+ class="table-heading-1">keySplines=".5 0 .5 1"</span></td>
+ </tr>
+ <tr>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of 0 .75 .25 1"
+ src="images/animate/keySplines03.svg" /> <span
+ class="table-heading-1">keySplines="0 .75 .25 1"</span></td>
+ <td><img class="bordered" width="250" height="250"
+ alt="Example keySplines01 - keySplines of 1 0 .25 .25"
+ src="images/animate/keySplines04.svg" /><span
+ class="table-heading-1">keySplines="1 0 .25 .25"</span></td>
+ </tr>
+</table>
- <p>To illustrate the calculations, consider the simple
- example:</p>
+<p>To illustrate the calculations, consider the simple example:</p>
+
<pre>
<animate dur="4s" values="10; 20" keyTimes="0; 1"
calcMode="spline" <strong>keySplines</strong>=<em>{as in table}</em> />
</pre>
- <p>Using the <a>'keySplines'</a> values for each of the four cases
- above, the approximate interpolated values as the animation
- proceeds are:</p>
- <table class="data">
- <caption>keySplines values</caption>
- <thead>
- <tr>
- <th>Value of <span class='attr-name'>'keySplines'</span></th>
- <th>Initial value</th>
- <th>After 1s</th>
- <th>After 2s</th>
- <th>After 3s</th>
- <th>Final value</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>0 0 1 1</th>
- <td>10.0</td>
- <td>12.5</td>
- <td>15.0</td>
- <td>17.5</td>
- <td>20.0</td>
- </tr>
- <tr>
- <th>.5 0 .5 1</th>
- <td>10.0</td>
- <td>11.0</td>
- <td>15.0</td>
- <td>19.0</td>
- <td>20.0</td>
- </tr>
- <tr>
- <th>0 .75 .25 1</th>
- <td>10.0</td>
- <td>18.0</td>
- <td>19.3</td>
- <td>19.8</td>
- <td>20.0</td>
- </tr>
- <tr>
- <th>1 0 .25 .25</th>
- <td>10.0</td>
- <td>10.1</td>
- <td>10.6</td>
- <td>16.9</td>
- <td>20.0</td>
- </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>
- </div>
+
+<p>Using the <a>'keySplines'</a> values for each of the four cases
+above, the approximate interpolated values as the animation
+proceeds are:</p>
+
+<table class="data">
+ <caption>keySplines values</caption>
+ <thead>
+ <tr>
+ <th>Value of <span class='attr-name'>'keySplines'</span></th>
+ <th>Initial value</th>
+ <th>After 1s</th>
+ <th>After 2s</th>
+ <th>After 3s</th>
+ <th>Final value</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>0 0 1 1</th>
+ <td>10.0</td>
+ <td>12.5</td>
+ <td>15.0</td>
+ <td>17.5</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <th>.5 0 .5 1</th>
+ <td>10.0</td>
+ <td>11.0</td>
+ <td>15.0</td>
+ <td>19.0</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <th>0 .75 .25 1</th>
+ <td>10.0</td>
+ <td>18.0</td>
+ <td>19.3</td>
+ <td>19.8</td>
+ <td>20.0</td>
+ </tr>
+ <tr>
+ <th>1 0 .25 .25</th>
+ <td>10.0</td>
+ <td>10.1</td>
+ <td>10.6</td>
+ <td>16.9</td>
+ <td>20.0</td>
+ </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>
<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.</p>
<div class="example">
<p>A simple "grow" animation can increase the width of an object
@@ -1418,83 +1611,108 @@ SMIL Animation: Additive animation</a>.
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>
- <dl>
- <dt id="AdditiveAttribute"><span class='adef'>additive</span> =
- <span class='attr-value'>"replace | sum"</span></dt>
- <dd>
- <p>Controls whether or not the animation is
- additive.</p>
-
- <dl>
- <dt><span class='attr-value'>sum</span></dt>
- <dd>Specifies that the animation will add to the
- underlying value of the attribute and other lower
- priority animations.</dd>
- <dt><span class='attr-value'>replace</span></dt>
- <dd>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 <a>'by'</a> and <a>'to'</a>, as described in <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">
- SMIL Animation: How from, to and by attributes affect
- additive behavior</a>.</dd>
- </dl>
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAttribute">SMIL Animation: 'additive' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.6).</p>
- </dd>
- <dt id="AccumulateAttribute"><span class='adef'>accumulate</span> =
- <span class='attr-value'>"none | sum"</span></dt>
- <dd>
- <p>Controls whether or not the animation is
- cumulative.</p>
-
- <dl>
- <dt><span class='attr-value'>sum</span></dt>
- <dd>Specifies that each repeat iteration after the
- first builds upon the last value of the previous
- iteration.</dd>
- <dt><span class='attr-value'>none</span></dt>
- <dd>Specifies that repeat iterations are not
- cumulative. This is the default.</dd>
- </dl>
-
- <p>This attribute is ignored if the target attribute value
- does not support addition, or if the animation element
- does not repeat.</p>
-
- <p>Cumulative animation is not defined for "<em>to
- animation</em>".</p>
-
- <p>This attribute will be ignored if the animation function
- is specified with only the <a>'to'</a>
- attribute.</p>
-
- <p>Except for any SVG-specific rules explicitly mentioned
- in this specification, the normative definition for this
- attribute is the
- <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
- In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation: 'accumulate' attribute</a>
- ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
- </dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AdditiveAttribute">additive</dfn></td>
+ <td>replace | sum</td>
+ <td>replace</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Controls whether or not the animation is additive.</p>
+ <dl>
+ <dt><span class='attr-value'>replace</span></dt>
+ <dd>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 <a>'by'</a> and <a>'to'</a>, as described in <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">
+ SMIL Animation: How from, to and by attributes affect
+ additive behavior</a>.</dd>
+ <dt><span class='attr-value'>sum</span></dt>
+ <dd>Specifies that the animation will add to the
+ underlying value of the attribute and other lower
+ priority animations.</dd>
+ </dl>
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AdditiveAttribute">SMIL Animation: 'additive' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.6).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AccumulateAttribute">accumulate</dfn></td>
+ <td>none | sum</td>
+ <td>none</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Controls whether or not the animation is
+ cumulative.</p>
+
+ <dl>
+ <dt><span class='attr-value'>none</span></dt>
+ <dd>Specifies that repeat iterations are not
+ cumulative. This is the default.</dd>
+ <dt><span class='attr-value'>sum</span></dt>
+ <dd>Specifies that each repeat iteration after the
+ first builds upon the last value of the previous
+ iteration.</dd>
+ </dl>
+
+ <p>This attribute is ignored if the target attribute value
+ does not support addition, or if the animation element
+ does not repeat.</p>
+
+ <p>Cumulative animation is not defined for "<em>to
+ animation</em>".</p>
+
+ <p>This attribute will be ignored if the animation function
+ is specified with only the <a>'to'</a>
+ attribute.</p>
+
+ <p>Except for any SVG-specific rules explicitly mentioned
+ in this specification, the normative definition for this
+ attribute is the
+ <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
+ In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation: 'accumulate' attribute</a>
+ ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 3.3.1).</p>
+ </dd>
+</dl>
</edit:with>
<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
@@ -1553,33 +1771,47 @@ are not allowed, and will be ignored if
<p>Except for any SVG-specific rules explicitly mentioned in this
specification, the normative definition for this element is the
<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#setElement">SMIL Animation: 'set' element</a>
([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.2).</p>
<edit:elementsummary name='set'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="SetElementToAttribute"><span
- class="adef">to</span> = "<span
- class="attr-value"><value></span>"</dt>
- <dd>Specifies the value for the attribute during the
- duration of the <a>'set'</a>
- element. The argument value must match the attribute
- type.</dd>
- </dl>
- </div>
- <p>For a list of attributes and properties that can be animated
- using the <a>'set'</a> element, see
- <a
- href="animate.html#AnimationAttributesAndProperties">Elements,
- attributes and properties that can be animated</a>.</p>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="SetElementToAttribute">to</dfn></td>
+ <td><value></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <dd>Specifies the value for the attribute during the
+ duration of the <a>'set'</a>
+ element. The argument value must match the attribute
+ type.</dd>
+ </dd>
+</dl>
+
+<p>For a list of attributes and properties that can be animated
+using the <a>'set'</a> element, see
+<a href="animate.html#AnimationAttributesAndProperties">Elements,
+attributes and properties that can be animated</a>.</p>
</edit:with>
<h3 id="AnimateMotionElement">The <span class="element-name">'animateMotion'</span> element</h3>
<edit:with element='animateMotion'>
<p>The <a>'animateMotion'</a> element causes a referenced element to
@@ -1588,115 +1820,198 @@ move along a motion path.</p>
<p>Except for any SVG-specific rules explicitly mentioned in this
specification, the normative definition for this element is the
<a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL Animation</cite></a> specification.
In particular, see <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#animateMotionElement">SMIL Animation: 'animateMotion' element</a>
([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).</p>
<edit:elementsummary name='animateMotion'/>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AnimateMotionElementCalcModeAttribute"><span class='adef'>calcMode</span> =
- <span class='attr-value'>"discrete | linear | paced | spline"</span></dt>
- <dd>Specifies the interpolation mode for the animation.
- Refer to general description of the <a>'animate/calcMode'</a> attribute above. The
- only difference is that the default value for the <a>'calcMode'</a>
- for <a>'animateMotion'</a> is <span class="attr-value">'paced'</span>. See <a
- href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionCalcModeAttribute">
- SMIL Animation: 'calcMode' attribute for
- 'animateMotion'</a>.</dd>
- <dt id="PathAttribute"><span class="adef">path</span> = "<span
- class="attr-value"><path-data></span>"</dt>
- <dd>The motion path, expressed in the same format and
- interpreted the same way as the <a>'path/d'</a> attribute on the
- <a>'path element'</a> element. The effect
- of a motion path animation is to add a supplemental
- transformation matrix onto the CTM for the referenced
- object which causes a translation along the x- and y-axes
- of the current user coordinate system by the computed X and
- Y values computed over time.</dd>
- <dt id="KeyPointsAttribute"><span class="adef">keyPoints</span> = "<span
- class="attr-value"><list-of-numbers></span>"</dt>
- <dd><p><a>'keyPoints'</a> 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 <a>'keyTimes'</a>
- value. Distance calculations use the user agent's <a
- href="paths.html#DistanceAlongAPath">distance along the
- path</a> algorithm. Each progress value in the list
- corresponds to a value in the <a>'keyTimes'</a>
- attribute list.</p>
- <p>If a list of <a>'keyPoints'</a> is specified, there
- must be exactly as many values in the
- <a>'keyPoints'</a> list as in the <a>'keyTimes'</a>
- list.</p>
- <p>If there are any errors in the <a>'keyPoints'</a>
- specification (bad values, too many or too few values),
- then the document is in error (see <a
- href="implnote.html#ErrorProcessing">Error
- processing</a>).</p></dd>
- <dt id="RotateAttribute"><span class="adef">rotate</span> = "<span
- class="attr-value"><a><number></a> | auto |
- auto-reverse</span>"</dt>
- <dd>
- <p>The <a>'rotate'</a> attribute post-multiplies a supplemental
- transformation matrix onto the CTM 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
- <a>'path attribute'</a> attribute.</p>
-
- <dl>
- <dt><span class="attr-value">auto</span></dt>
- <dd>Indicates that the object is rotated over time by the angle of
- the direction (i.e., directional tangent vector) of the motion path.</dd>
-
- <dt><span class="attr-value">auto-reverse</span></dt>
- <dd>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.</dd>
-
- <dt><span class='attr-value'><a><number></a></span></dt>
- <dd>Indicates that the target element has a constant rotation
- transformation applied to it, where the rotation angle is the
- specified number of degrees.</dd>
- </dl>
-
- <p>The default value is <span class='attr-value'>'0'</span>.</p>
- </dd>
- <dt id="OriginAttribute"><span class="adef">origin</span> = "<span
- class="attr-value">default</span>"</dt>
- <dd>The <a>'origin'</a> attribute is <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionOriginAttribute">defined in the SMIL Animation
- specification</a> ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).
- It has no effect in SVG.</dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AnimateMotionElementCalcModeAttribute">calcMode</dfn></td>
+ <td>discrete | linear | paced | spline</td>
+ <td>paced</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Specifies the interpolation mode for the animation.
+ Refer to general description of the <a>'animate/calcMode'</a> attribute above. The
+ only difference is that the default value for the <a>'calcMode'</a>
+ for <a>'animateMotion'</a> is <span class="attr-value">'paced'</span>. See <a
+ href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionCalcModeAttribute">
+ SMIL Animation: 'calcMode' attribute for
+ 'animateMotion'</a>.</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AnimateMotionElementPathAttribute">path</dfn></td>
+ <td><path-data></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The motion path, expressed in the same format and
+ interpreted the same way as the <a>'path/d'</a> attribute on the
+ <a>'path element'</a> element. The effect
+ of a motion path animation is to add a supplemental
+ transformation matrix onto the CTM for the referenced
+ object which causes a translation along the x- and y-axes
+ of the current user coordinate system by the computed X and
+ Y values computed over time.</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="KeyPointsAttribute">keyPoints</dfn></td>
+ <td><list-of-numbers></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p><a>'keyPoints'</a> 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 <a>'keyTimes'</a>
+ value. Distance calculations use the user agent's <a
+ href="paths.html#DistanceAlongAPath">distance along the
+ path</a> algorithm. Each progress value in the list
+ corresponds to a value in the <a>'keyTimes'</a>
+ attribute list.</p>
+ <p>If a list of <a>'keyPoints'</a> is specified, there
+ must be exactly as many values in the
+ <a>'keyPoints'</a> list as in the <a>'keyTimes'</a>
+ list.</p>
+ <p>If there are any errors in the <a>'keyPoints'</a>
+ specification (bad values, too many or too few values),
+ then the document is in error (see <a
+ href="implnote.html#ErrorProcessing">Error
+ processing</a>).</p>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="RotateAttribute">rotate</dfn></td>
+ <td><a><number></a> | auto | auto-reverse</td>
+ <td>0</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'rotate'</a> attribute post-multiplies a supplemental
+ transformation matrix onto the CTM 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
+ <a>'path attribute'</a> attribute.</p>
+
+ <dl>
+ <dt><span class="attr-value">auto</span></dt>
+ <dd>Indicates that the object is rotated over time by the angle of
+ the direction (i.e., directional tangent vector) of the motion path.</dd>
+
+ <dt><span class="attr-value">auto-reverse</span></dt>
+ <dd>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.</dd>
+
+ <dt><span class='attr-value'><a><number></a></span></dt>
+ <dd>Indicates that the target element has a constant rotation
+ transformation applied to it, where the rotation angle is the
+ specified number of degrees.</dd>
+ </dl>
+ </dd>
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="OriginAttribute">origin</dfn></td>
+ <td>default</td>
+ <td>default</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>The <a>'origin'</a> attribute is <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#MotionOriginAttribute">defined in the SMIL Animation
+ specification</a> ([<a href="refs.html#ref-SMILANIM">SMILANIM</a>], section 4.3).
+ It has no effect in SVG.</p>
+ </dd>
+</dl>
<div id='MPathElement'>
<edit:elementsummary name='mpath'/>
</div>
- <div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="MPathElementHrefAttribute"><span
- class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>An <a>IRI
- reference</a> to the <a>'path element'</a> element which
- defines the motion path.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- no.</span></dd>
- </dl>
- </div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="MPathElementHrefAttribute">xlink:href</dfn></td>
+ <td><a><iri></a></td>
+ <td>(none)</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>An <a>IRI reference</a> to the <a>'path element'</a> element which
+ defines the motion path.</p>
+ </dd>
+</dl>
<p>For <a>'animateMotion'</a>, the specified values for <a>'from'</a>,
<a>'by'</a>, <a>'to'</a> and <a>'values'</a> consists of x, y coordinate
pairs, with a single comma and/or white space separating the x coordinate
from the y coordinate. For example, <span class="attr-value">from="33,15"</span>
specifies an x coordinate value of <span class="attr-value">33</span> and
a y coordinate value of <span class="attr-value">15</span>.</p>
@@ -1939,27 +2254,40 @@ a future version of the SVG specificatio
<p>The <a>'animateTransform'</a> element animates a transformation attribute
on a target element, thereby allowing animations to control translation,
scaling, rotation and/or skewing.</p>
<p class="issue">This section should talk about the <a>'transform'</a> property.</p>
<edit:elementsummary name='animateTransform'/>
-<div class="adef-list">
- <p><em>Attribute definitions:</em></p>
- <dl>
- <dt id="AnimateTransformElementTypeAttribute"><span class="adef">type</span> =
- "<span class="attr-value">translate | scale | rotate | skewX | skewY</span>"</dt>
- <dd>Indicates the type of transformation which is to have its values
- change over time.
- If the attribute is not specified, then the effect is as if a value of <span class="attr-value">'translate'</span> were specified.
- </dd>
- </dl>
-</div>
+<p><em>Attribute definitions:</em></p>
+
+<dl class="attrdef-list">
+ <dt>
+ <table class="propdef attrdef">
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ <th>Lacuna value</th>
+ <th>Animatable</th>
+ </tr>
+ <tr>
+ <td><dfn id="AnimateTransformElementTypeAttribute">type</dfn></td>
+ <td>translate | scale | rotate | skewX | skewY</td>
+ <td>translate</td>
+ <td>no</td>
+ </tr>
+ </table>
+ </dt>
+ <dd>
+ <p>Indicates the type of transformation which is to have its values
+ change over time.</p>
+ </dd>
+</dl>
<p>The <a>'from'</a>, <a>'by'</a> and <a>'to'</a> attributes take a value
expressed using the same syntax that is available for the given transformation
type:</p>
<ul>
<li>For a <span class="attr-value">type="translate"</span>, each individual
value is expressed as <span class="attr-value"><tx> [,<ty>]</span>.</li>
Received on Friday, 27 September 2013 07:21:20 UTC