16 アニメーション

16.1 概要
16.2 アニメーション要素
- 16.2.1 概観
- 16.2.2 SMIL 2.1 アニメーションとの関係
- 16.2.3 アニメーション要素の例
- 16.2.4 アニメーションの対象となる要素を特定する属性
- 16.2.5 アニメーションの対象となる属性またはプロパティを特定する属性
- 16.2.6 アニメーションと名前空間
- 16.2.7 定速アニメーションと複合型
- 16.2.8 アニメーションのタイミングを制御する属性
- 16.2.9 時経過に伴うアニメーション値を定義する属性
- 16.2.10 アニメーションが加算可能かどうかを制御する属性
- 16.2.11 継承
- 16.2.12 'animate' 要素
- 16.2.13 'set' 要素
- 16.2.14 'animateMotion' 要素
- 16.2.15 'mpath' 要素
- 16.2.16 'animateColor' 要素
- 16.2.17 'animateTransform' 要素
- 16.2.18 アニメーション可能な要素, 属性, プロパティ
16.3 SVG DOM を利用したアニメーション
16.4 アニメーションと包含ボックス

16.1 概要

SVG はベクターグラフィックスを時経過に伴って変化させる能力をサポートする。 SVG 内容は次の方法でアニメーションさせられる： SVG supports the ability to change vector graphics over time. SVG content can be animated in the following ways:

SVG のアニメーション要素の利用。 SVG 文書片は文書の要素に対し時経過に伴う変化を記述できる。様々なアニメーション要素の利用により、モーションパス, フェードイン／フェードアウト効果, オブジェクトの増大, 縮小, 回転, 色の変化などを定義できる。 Using SVG's animation elements. SVG document fragments can describe time-based modifications to the document's elements. Using the various animation elements, you can define motion paths, fade-in or fade-out effects, and objects that grow, shrink, spin or change color.
SVG uDOM の利用。 SVG uDOM は文書オブジェクトモデル (DOM) Level 3 仕様 [DOM3] に適合している。一部の属性はスクリプトからアクセス可能であり、それらの操作から多様なアニメーションが得られる。 uDOM のタイマー機能をアニメーションの起動と制御に用いることができる（下の例を見よ）。 Using the SVG uDOM. The SVG uDOM conforms to the Document Object Model (DOM) Level 3 specification [DOM3]. Some of the SVG attributes are accessible to scripting and by manipulating them many kind of animations can be achieved. The timer facility in the uDOM can be used to start up and control the animations. (See example below.)

16.2 アニメーション要素

16.2.1 概観

SVG のアニメーション要素は、 W3C の同期マルチメディア（ SYMM - Synchronized Multimedia ） Working Group および、同期マルチメディア統合言語 (SMIL) 2.1 （ Synchronized Multimedia Integration Language ）仕様 [SMIL21] の開発者達との協力により開発された。 SVG's animation elements were developed in collaboration with the W3C Synchronized Multimedia (SYMM) Working Group, developers of the Synchronized Multimedia Integration Language (SMIL) 2.1 Specification [SMIL21].

SVG は SMIL 2.1 仕様で定められたアニメーションの機能を組み込み、いくつかの SVG 特有の拡張を提供する。 SVG incorporates the animation features defined in the SMIL 2.1 specification and provides some SVG-specific extensions.

SMIL 2.1 をサポートする言語で利用できるアプローチと機能についての概要については、 SMIL 2.1 Animation Modules のイントロダクションおよびアニメーションサンドイッチモデルの節 ([SMIL21], 3.2 節, 3.3.3 節) を参照のこと。 SMIL アニメーションの範囲外のアニメーション特色機能の一覧は、下の SMIL 2.1 アニメーションからの SVG 拡張を見よ。 For an introduction to the approach and features available in any language that supports SMIL 2.1 animation, see the Introduction and animation sandwich model sections of the SMIL 2.1 Animation Modules ([SMIL21], sections 3.2 and 3.3.3). For the list of animation features which go beyond SMIL Animation, see SVG extensions to SMIL 2.1 Animation below.

16.2.2 SMIL 2.1 アニメーションとの関係

SVG は SMIL 2.1 アニメーションから見ればホスト言語にあたり、その仕様で許される追加的制約と特色機能が導入される。この仕様で明示する SVG 特有の規則を除き、 SVG のアニメーション要素と属性は、 SMIL 2.1 Animation Modules と SMIL 2.1 タイミングと同期の章 ([SMIL21], 3 節, 10 節) によるものになる。 SMIL タイミングエンジンと描画木は独立に働くことに注意。 SVG is a host language in terms of SMIL 2.1 Animation and therefore introduces additional constraints and features as permitted by that specification. Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for SVG's animation elements and attributes are those in the SMIL 2.1 Animation Modules and the SMIL 2.1 Timing and Synchronization chapter ([SMIL21], sections 3 and 10). Note that the SMIL timing engine is orthogonal to the rendering tree.

SVG は SMIL 2.1 Animation Modules に定義されている次の４つのアニメーション要素をサポートする： SVG supports the following four animation elements which are defined in the SMIL 2.1 Animation Modules:

	animate		スカラー値の属性とプロパティに時経過に伴って異なる値をあてがわれるようにする allows scalar attributes and properties to be assigned different values over time
	set		animate の簡便な省略形式で visibility プロパティなど、非数値の属性やプロパティにアニメーション値をあてがうのに役立つ a convenient shorthand for 'animate', which is useful for assigning animation values to non-numeric attributes and properties, such as the 'visibility' property
	animateMotion		モーションパスに沿って要素を動かす moves an element along a motion path
	animateColor		属性／プロパティの色値を時経過に伴って変化させる modifies the color value of particular attributes or properties over time

加えて、 SVG には SMIL 2.1 と互換性のある次の拡張が含まれる： Additionally, SVG includes the following compatible extensions to SMIL 2.1:

	animateTransform		transform 属性などの SVG の変換属性の１つを時経過に伴って変化させる modifies one of SVG's transformation attributes overtime, such as the 'transform' attribute
	path 属性		SVG のパスデータの構文のすべてが animateMotion 要素の path 属性でも指定できる（ SMIL 2.1 アニメーションの 'path' 属性においては SVG の path 要素におけるパスデータ構文の一部のみが許されていた） allows any feature from SVG's path data syntax to be specified in a 'path' attribute to the 'animateMotion' element (SMIL 2.1 Animation only allows a subset of SVG's path data syntax within a 'path' attribute)
	mpath 要素		SVG における animateMotion 要素は、モーションパスの定義として path 要素を参照する mpath 子要素を含められる allows an 'animateMotion' element to contain a child 'mpath' element which references an SVG 'path' element as the definition of the motion path
	keyPoints 属性		モーションパス・アニメーションの速度を正確に制御する keyPoints 属性が animateMotion に追加されている adds a 'keyPoints' attribute to the 'animateMotion' to provide precise control of the velocity of motion path animations
	rotate 属性		SVG には、オブジェクトをそのＸ軸正方向がモーションパスの向きに従う接線ベクトルと同じ方向（または逆方向）になるように自動的に回転させるかどうかを制御する rotate 属性が animateMotion 要素に追加されている adds a 'rotate' attribute to the 'animateMotion' to control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path

他の言語との互換性をとるため、 SVG はアニメーションの対象となる要素の識別に xlink:href 属性による IRI 参照を利用する。 For compatibility with other aspects of the language, SVG uses IRI references via an 'xlink:href' attribute to identify the elements which are to be targets of the animations.

SMIL 2.1 アニメーションにおいては、ホスト言語が文書始動（ document begin ）と文書停止（ document end ）の意味を定義することが要求される。これらは用語定義の節に定められている。 SMIL 2.1 Animation requires that the host language define the meaning for document begin and document end, and these are defined in the Definitions section.

16.2.3 アニメーション要素の例

下の Example anim01 に SVG の５つのアニメーション要素による用例を示す。 Example anim01 below demonstrates each of SVG's five animation elements.

Example: 19_01.svg

<?xml version="1.0"?>
<svg width="8cm" height="3cm"  viewBox="0 0 800 300"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <!-- アニメーション要素の実証 -->
  <desc>Example anim01 - demonstrate animation elements</desc>
  <rect x="1" y="1" width="798" height="298" 
        fill="none" stroke="blue" stroke-width="2" />
  <!-- 以下に矩形の x, y, width 属性をアニメーションさせて矩形を大きくし、
        ついにはビューポートを覆い尽くす 'animate' 要素の利用を示す。 -->
  <!-- The following illustrates the use of the 'animate' element
        to animate a rectangles x, y, and width attributes so that
        the rectangle grows to ultimately fill the viewport. -->
  <rect xml:id="RectElement" x="300" y="100" width="300" height="100"
        fill="rgb(255,255,0)"  >
    <animate attributeName="x" 
             begin="0s" dur="9s" fill="freeze" from="300" to="0" />
    <animate attributeName="y" 
             begin="0s" dur="9s" fill="freeze" from="100" to="0" />
    <animate attributeName="width" 
             begin="0s" dur="9s" fill="freeze" from="300" to="800" />
    <animate attributeName="height" 
             begin="0s" dur="9s" fill="freeze" from="100" to="300" />
  </rect>
  <!-- テキスト文字列の原点が (0,0) に位置するように新しい利用座標系を設定し、
       回転と拡大を新たな原点から相対的にする。 -->
  <!-- Set up a new user coordinate system so that
        the text string's origin is at (0,0), allowing
        rotation and scale relative to the new origin -->
  <g transform="translate(100,100)" >
    <!-- 以下に 'set', 'animateMotion', 'animateColor', 'animateTransform' 要素
         の利用を示す。下の 'text' 要素は隠れた状態からスタートする：
           * 3 秒後にそれは見える状態になり
           * ビューポートを対角に横切り
           * 青から濃い赤に変色し
           * -30 度から 0 度に回転し
           * 3 倍に拡大する。 -->
    <!-- The following illustrates the use of the 'set', 'animateMotion',
         'animateColor' and 'animateTransform' elements. The 'text' element 
         below starts off hidden (i.e., invisible). At 3 seconds, it:
           * becomes visible
           * continuously moves diagonally across the viewport
           * changes color from blue to dark red
           * rotates from -30 to zero degrees
           * scales by a factor of three. -->
    <text xml:id="TextElement" x="0" y="0"
          font-family="Verdana" font-size="35.27" visibility="hidden"  > 
      It's alive!
      <set attributeName="visibility" to="visible"
           begin="3s" dur="6s" fill="freeze" />
      <animateMotion path="M 0 0 L 100 100" 
           begin="3s" dur="6s" fill="freeze" />
      <animateColor attributeName="fill"
           from="rgb(0,0,255)" to="rgb(128,0,0)"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" 
           type="rotate" from="-30" to="0"
           begin="3s" dur="6s" fill="freeze" />
      <animateTransform attributeName="transform" 
           type="scale" from="1" to="3" additive="sum"
           begin="3s" dur="6s" fill="freeze" />
    </text>
  </g>
</svg>

0 秒	3 秒後
6 秒後	9 秒後

以下の節で種々のアニメーション属性および要素について述べる。 The sections below describe the various animation attributes and elements.

16.2.4 アニメーションの対象となる要素を特定する属性

次の属性はすべてのアニメーション要素に共通して利用され、アニメーションの対象となる要素を特定する。対象要素がアニメーションの対象になれない場合、アニメーションの効果は生じない。 The following attributes are common to all animation elements and identify the target element for the animation. If the target element is not capable of being a target of the animation, then the animation has no effect.

どの種類の要素が特定の種類のアニメーションの対象になり得るかの制約については個々のアニメーション要素の記述を見よ。 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.

Schema: animatecommon

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

属性定義：

xlink:href = "<IRI>"

このアニメーションの対象となり、時経過に伴って変化することになる要素への IRI 参照。 An IRI reference to the element which is the target of this animation and which therefore will be modified over time.

対象要素は現在の SVG 文書片の一部でなければならない。対象要素が現在の SVG 文書片の一部でなかったり、さもなければ IRI 参照が無効な IRI 参照であった場合、アニメーションの効果は生じない。これは、アニメーションのタイミングは依然として実行されるが、対象の属性に対するアニメーションの効果は適用されないことを意味する。 The target element must be part of the current SVG document fragment. If the target element is not part of the current SVG document fragment or the IRI reference is otherwise an invalid IRI reference, then the animation has no effect. This means the animation timing will still run but no animation effect will be applied to the target attribute.

xlink:href 属性が与えられていない場合、このアニメーション要素の直接の親要素がアニメーションの対象となる。 If the 'xlink:href' attribute is not provided, then the target element will be the immediate parent element of the current animation element.

xlink:href は、きっかり１つの対象要素を指していなければならない。 xlink:href が複数の対象要素を指している場合、サポート外の値として扱われ、属性が指定されなかったかのように処理されるものとする。 xlink:href="" （空文字列）の場合も xlink:href が指定されなかったかのように処理されるものとする。 'xlink:href' must point to exactly one target element. If 'xlink:href' points to multiple target elements then it shall be treated as an unsupported value and processed as if the attribute had not been specified. If xlink:href="" (the empty string), it shall be treated as if the 'xlink:href' attribute was not specified.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules ([SMIL21], 3.5.1 節) のアニメーション対象の指定で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Specifying the animation target section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.1).

アニメーション：不可

アニメーションの対象要素の xml:id または id 属性が変更された場合のアニメーションへの影響は未定義であり、実装に依存する。将来版の仕様では、文書木にすでに存在するアニメーション要素に影響するような要素に対する改変の結果についてより詳細に述べることになる。 If the 'xml:id' or 'id' attribute of an element that is the target of an animation is changed, then whether this affects the animation is undefined, and implementation dependent. Future specifications will describe in more detail the result of modifying elements that affect animation elements which are already in the document tree.

アニメーション対象の解決は、アニメーション要素が文書木へ挿入される時点か文書始動時刻のいずれか遅い方になる。（文書始動時刻をいつにするかを制御する timelineBegin 属性も見よ。） Resolution of the animation target occurs when the animation element is inserted into the document tree or at the document begin time, whichever is later. (See also the 'timelineBegin' attribute, which controls when the document begin time occurs.)

16.2.5 アニメーションの対象となる属性またはプロパティを特定する属性

以下の属性は対象要素において、時経過に伴って値が変化する対象となる属性／プロパティを特定する。 The following attributes identify the target attribute or property for the given target element whose value changes over time.

Schema: animateattributecommon

    <define name='svg.AnimateAttributeCommon.attr'>
      <optional>
        <attribute name='attributeName' svg:animatable='false' svg:inheritable='false'>
          <ref name='QName.datatype'/>
        </attribute>
      </optional>
      <optional>
        <attribute name='attributeType' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>XML</value>
            <value>CSS</value>
            <value>auto</value>
          </choice>
        </attribute>
      </optional>
    </define>

属性定義：

attributeName = "<QName>"

対象となる属性の名前を指定する。修飾名が用いられた場合は属性が属する XML 名前空間を指示する。接頭辞の名前空間への解決は、現在の（参照元の）アニメーション要素のスコープから行われる。 attributeName 属性はオプションなので省略値は存在しないことに注意。値が指定されていない場合でも、依然としてアニメーションは実行され、アニメーション要素に関連するイベント（ beginEvent など）は生じるが、アニメーションはどの属性に対しても適用されない。 Specifies the name of the target attribute. A qualified name, if used, indicates the XML namespace for the attribute. The prefix will be resolved to a namespace name in the scope of the current (i.e. the referencing) animation element. Note that while the 'attributeName' attribute is optional, there is no lacuna value. When no value is specified the animation still runs, and events related to the animation element (e.g. beginEvent) are still fired, but the animation doesn't apply to any attribute.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules のアニメーション対象の指定 ([SMIL21], 3.5.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Specifying the animation target section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.1).

アニメーション：不可

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

対象となる属性とそれに関連付けられた値が定義される名前空間を指定する。属性値は次のいずれか（大文字と小文字は区別される）： Specifies the namespace in which the target attribute and its associated values are defined. The attribute value is one of the following (values are case-sensitive):

CSS

これは attributeName の値がこの仕様でアニメーション可能とされているプロパティ名であることを指示する。 This specifies that the value of 'attributeName' is the name of a property defined as animatable in this specification.

XML

これは attributeName の値が対象要素の XML 属性名であることを指示する。 attributeName の値が接頭辞を持つ場合、上で述べたように解決される。そうでない場合、対象の属性はどの名前空間にも属さない。属性はこの仕様でアニメーション可能であるものと定められていなければならない。 This specifies that the value of 'attributeName' is the name of an XML attribute on the target element. If the value for 'attributeName' has a prefix, it is resolved as described above. If not, then the target attribute is in no namespace. The attribute must be defined as animatable in this specification.

auto

UA は attributeName の値から対象要素に適用できるアニメーション可能なプロパティ名または属性名と一致するものを見つけるべきであることを指示する。 UA が CSS をサポートする場合、最初に（ SVG で定義されていないものも含めた） CSS プロパティ名の一覧から、対象要素においてアニメーション可能と定められているプロパティ名に一致するものを検索する。該当するプロパティが見つからない場合、 UA は適切な名前空間の中で該当するアニメーション可能な属性を検索しなければならない。 attributeName の値に接頭辞が無い場合、検索する属性はどの名前空間にも属さないものになる。接頭辞付きの場合、その接頭辞は上で述べたように名前空間に解決され、属性はその中から検索される。該当するプロパティまたは属性が見つからなかった場合、アニメーションの効果は生じない。 The user agent should match the 'attributeName' to an animatable property or attribute applicable to the target element. If the user agent supports CSS, it must first search through its list of supported CSS properties (including those not defined by SVG) for a matching property name that is defined to be animatable for the target element. If no suitable property is found, the user agent must then search for a suitable animatable attibute, using the appropriate namespace. If the 'attributeName' value has no prefix, then the attribute searched for is in no namespace. If it does have a prefix, then that prefix is resolved as described above and the attribute searched for in the associated namespace. If no suitable property or attribute is found, the animation has no effect.

すべてのプロパティがすべての SVG 要素に適用可能になるとは、同名の属性名がその要素に適用可能だったとしても、限らないことに注意。特に、 CSS の width と height プロパティは、 width と height 属性を持つ SVG 要素には適用できない。 Note that not all properties are applicable to all SVG elements, even if an attribute of the same name is applicable to the element. In particular, the CSS 'width' and 'height' properties are not applicable to those SVG elements which have 'width' and 'height' attributes.

省略値は 'auto' 。 The lacuna value is 'auto'.

スタイルシート（ SVG の他のプロファイルで利用し得るような、外部スタイルシート, style 要素, style 属性）があてがわれていない場合、呈示属性のアニメーションは、対応するプロパティに対するアニメーションと等価になる。従って、 SVG Tiny 1.2 のプロパティについては、 attributeType="XML" の呈示属性に対するアニメーションにより生じる効果は、対応する attributeType="CSS" のプロパティに対するアニメーションと同じになる。 In the absence of style sheets (external style sheets, 'style' elements or 'style' attributes, as may be available in other profiles of SVG) animation of presentation attributes is equivalent to animating the corresponding property. Thus, for properties listed in SVG Tiny 1.2, the same effect occurs from animating the presentation attribute with attributeType="XML" as occurs with animating the corresponding property with attributeType="CSS".

アニメーション：不可

16.2.6 アニメーションと名前空間

下の Example animns01 に、アニメーション対象になる属性を特定するため、参照元の要素のスコープ内で名前空間接頭辞が名前空間名に解決され、その名前空間名が（対象のスコープ内でその接頭辞が利用されるかどうかに関係無く）利用される様子を示す。 Example animns01 below shows a namespace prefix being resolved to a namespace name in the scope of the referencing element, and that namespace name being used (regardless of the prefix which happens to be used in the target scope) to identify the attribute being animated.

Example: animns01.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Demonstration of the resolution of namespaces for animation</title>
    <!-- 定義された時点では QName a:href は、名前空間名
        "http://www.w3.org/1999/xlink" と局所名 "href" に解決される -->
    <!-- at the point of definition, the QName a:href resolves to the namespace 
        name "http://www.w3.org/1999/xlink" and the local name "href" -->
    <g xmlns:a="http://www.w3.org/1999/xlink">
        <animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>
    </g>
    <!-- 利用時点では名前空間名 "http://www.w3.org/1999/xlink" は
      名前空間接頭辞 'b' に結びつけられる一方、接頭辞 'xlink' は
      別の名前空間に結びつけられる -->
    <!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink" 
      happens to be bound to the namespace prefix 'b'  while the prefix
      'xlink' is bound to a different namespace name-->
    <g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar">
        <image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/>
    </g>
</svg>

16.2.7 定速アニメーションと複合型

定速アニメーション（ paced animation ）は、 to, from, by, values 属性で定められる様々なアニメーション値に対する距離の概念の存在を前提にする。距離は（ <length> などの）スカラー型, 色, および animateTransform がサポートする変換型の一部に対してのみ定義される。下に挙げる距離関数において、 V_a と V_b は距離計算の対象になる２値を表すものとする。 Paced animations assume a notion of distance between the various animation values defined by the 'to', 'from', 'by' and 'values' attributes. Distance is defined only for scalar types (such as <length>), colors and the subset of transformation types that are supported by 'animateTransform'. In the list of distance functions below, Va and Vb represent the two values the distance between which is being calculated.

定速アニメーションには一定速度で変化するアニメーションの生成が意図されているので、距離関数をすべてのデータ型に定義することは意味をなさない。距離は n-次元ベクトルの型（スカラーも１次元のベクトルとして含まれる）に対し有用に定義され得る。例えば <length> 値はスカラーであり、 <color> 値は３次元ベクトルになる。故に、これらの型の属性には定速アニメーションが適用できる。一方、 <list-of-length> （ stroke-dasharray で利用される）はスカラー（１次元ベクトル）のリストであり、 <points-data> （ polygon の points 属性で利用される）は２次元ベクトルのリストなので、これらの型には距離関数は定義されず、定速アニメーションも適用できない。 Since paced animation is intended to produce an animation with an even pace of change, it does not make sense to define distance functions for all data types. Distance can be usefully defined for types whose values are n-dimensional vectors (including scalars, which are 1-dimensional vectors). For example, a <length> value is a scalar value, and a <color> value is a 3-dimensional vector. Thus attributes of these types can have paced animation applied to them. On the other hand, a <list-of-length> (as used by 'stroke-dasharray') is a list of scalars (1-dimensional vectors), and <points-data> (as used by the 'points' attribute on a 'polygon') is a list of 2-dimensional vectors. Therefore, these types do not have a distance function defined and cannot have paced animation applied to them.

定速アニメーションがサポートする型の距離関数は以下のようになる： The distance functions for types that support paced animation are as follows:

<coordinate>, <integer>, <length>, <number>

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

例： rect の x 属性や circle の stroke-width プロパティに対するアニメーション。 Examples: animating the 'x' attribute on a 'rect', or the 'stroke-width' property on a 'circle'.

<color>

distance( V_a, V_b ) = sqrt(( V_a.red − V_b.red )² + ( V_a.green − V_b.green )² + ( V_a.blue − V_b.blue)² )

ここで、 V_i.red, V_i.green, V_i.blue はそれぞれ色値 V_i の R, G, B（赤緑青）成分。 , where:
V_i.red is the red component of the V_i color value,
V_i.green is the green component of the V_i color value, and
V_i.blue is the blue component of the V_i color value.

それぞれの色成分値は通常 [0, 1] 区間内にあり、 0 はその色成分が無いこと, 1 はその色成分が sRGB 色域 [SRGB] において最大量なることを表す。 <color> 値は sRGB 色域外を指定することも有り得るので、これらの成分値は [0, 1] の範囲外の値も取り得る。 Each of the color component values is usually in the range [0, 1], where 0 represents none of that color component, and 1 represents the maximum amount of that color component, in the sRGB gamut [SRGB]. Since <color> values may specify colors outside of the sRGB gamut, these component values may lie outside the range [0, 1].

例： ellipse の fill プロパティのアニメーション。 Example: animating the 'fill' property on an 'ellipse'.

'translate' 型の変換定義

distance( V_a, V_b ) = sqrt( ( V_a.tx − V_b.tx )² + ( V_a.ty − V_b.ty )² )

ここで、 V_i.tx と V_i.ty は、それぞれ並進変換値 V_i の x と y 成分。 , where:
V_i.tx is the x component of the V_i translation transform value, and
V_i.ty is the y component of the V_i translation transform value.

例（すべての型の変換定義に対し）： animateTransform を用いた g の transform 属性に対するアニメーション。 Example (for all transform definition types): animating the 'transform' attribute on a 'g' using 'animateTransform'.

'scale' 型の変換定義

distance( V_a, V_b ) = sqrt( ( V_a.sx − V_b.sx )² + ( V_a.sy − V_b.sy )² )

ここで、 V_i.sx と V_i.sy は、それぞれ拡縮変換値 V_i の x と y 成分。 , where:
V_i.sx is the x component of the V_i scale transform value, and
V_i.sy is the y component of the V_i scale transform value.

<transform-list> において拡縮変換を指定する際に拡縮の y 成分を省略した場合、暗黙的に x 成分と等しくされることに注意。 Note that, as when specifying scale transformations in a <transform-list>, if the y component of the scale is omitted it is implicitly equal to the x component.

'rotate', 'skewX', 'skewY' 型の変換定義

distance( V_a, V_b ) = sqrt( ( V_a.angle − V_b.angle )² )

ここで、 V_i.angle は、回転または斜傾変換値 V_i の角度成分。 , where:
V_i.angle is the angle component of the V_i rotation or skew transform value.

回転の距離関数は回転の中心点成分を対象にしたものではないので、回転の中心点を変化させる定速アニメーションが適用された場合、定速の動きに見えなくなり得ることに注意。 Since the distance function for rotations is not in terms of the rotation center point components, a paced animation that changes the rotation center point may not appear to have a paced movement when the animation is applied.

他のすべての型に対しては、距離関数は定義されていない。上に挙げたもの以外の型の属性やプロパティのアニメーションに対し calcMode="paced" が用いられた場合のアニメーションの効果は未定義である。 SVG UA はアニメーションを calcMode="linear" であったかのように行ってもよいが、そのようにすることを要求されてはいない。文書作成者には上に挙げたもの以外の型に対しては定速アニメーションを指定しないことが推奨される。 Distance functions for all other data types are not defined. If calcMode="paced" is used on an animation of an attribute or property whose type is not one of those listed above, the animation effect is undefined. SVG user agents may choose to perform the animation as if calcMode="linear", but this is not required. Authors are recommended not to specify paced animation on types not listed above.

16.2.8 アニメーションのタイミングを制御する属性

以下の属性はすべてのアニメーション要素に共通して利用されるものであり、アニメーションの始動と停止が何により生じるか, アニメーションが反復されるかどうか, アニメーション停止時にその状態を維持し続けるかどうかを含む、アニメーションのタイミングを制御する。 The following attributes are common to all animation elements and control the timing of the animation, including what causes the animation to start and end, whether the animation runs repeatedly, and whether to retain the end state the animation once the animation ends.

これらのタイミング属性はメディア要素にも適用される。 These timing attributes also apply to media elements.

Schema: animatetiming

    <define name='svg.AnimateTiming.attr' combine='interleave'>
      <ref name='svg.AnimateTimingNoMinMax.attr'/>
      <optional><attribute name='min' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='max' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

    <define name='svg.AnimateTimingNoMinMax.attr' combine='interleave'>
      <ref name='svg.AnimateTimingNoFillNoMinMax.attr'/>
      <optional>
        <attribute name='fill' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>remove</value>
            <value>freeze</value>
          </choice>
        </attribute>
      </optional>
    </define>

    <define name='svg.AnimateTimingNoFillNoMinMax.attr' combine='interleave'>
      <ref name='svg.AnimateBegin.attr'/>
      <optional><attribute name='dur' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='end' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='repeatCount' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='repeatDur' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional>
        <attribute name='restart' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>always</value>
            <value>never</value>
            <value>whenNotActive</value>
          </choice>
        </attribute>
      </optional>
    </define>

    <define name='svg.AnimateBegin.attr' combine='interleave'>
      <optional><attribute name='begin' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

以下の構文指定において、記号 "S" は次で定義される省略可能な空白文字を表す： In the syntax specifications that follow, optional white space is indicated as "S", defined as follows:

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

属性定義：

begin = "begin-value-list"

要素がいつ始動される（すなわち活動状態になる）べきかを定義する。属性値はセミコロンで区切られたタイミング指定子の値のリスト。 Defines when the element should begin (i.e. become active). The attribute value is a semicolon separated list of timing specifier values.

begin-value-list は次のように定義される： The definition of begin-value-list is as follows:

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

セミコロンで区切られた始動時刻のリスト。始動時刻のリストに対する解釈の詳細は SMIL 2.1 の「始動時刻と停止時刻リストの評価」の節を参照のこと。 A semicolon separated list of begin values. The interpretation of a list of begin times is detailed in SMIL 2.1 section on "Evaluation of begin and end time lists".

要素始動時刻を記述する。 Describes the element begin time.

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

SMIL 2.1 においては、これは要素始動を暗黙の同期基点（ syncbase ）からの時間差として記述する。 SVG における暗黙の同期基点始動は文書始動から相対的なものとして定義される。負の始動時刻は文書始動時刻が解決されさえすれば全く有効であり、容易に計算可能である。 For SMIL 2.1, this describes the element begin as an offset from an implicit syncbase. For SVG, the implicit syncbase begin is defined to be relative to the document begin. Negative begin times are entirely valid and easy to compute, as long as there is a resolved document begin time.

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

同期基点と、オプションのその同期基点からの時間差を記述する。要素始動は他のアニメーションの始動または活動停止から相対的なものとして定義される。同期基点は他のアニメーション要素への ID 参照と後続する、参照先のアニメーション要素の始動または活動停止のどちらに同期させるかを指定する .begin または .end からなる。 Describes a syncbase and an optional offset from that syncbase. The element begin is defined relative to the begin or active end of another animation. A syncbase consists of an ID reference to another animation element followed by either .begin or .end to identify whether to synchronize with the beginning or active end of the referenced animation element.

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

要素始動を誘発するイベントと、オプションの時間差を記述する。アニメーション始動はイベントが event-base 要素へ配送される時刻から相対的なものとして定義される。 event-ref の値として利用できるイベント名の一覧は、サポートされるイベントの完全な一覧の「アニメーションイベント名」の列を見よ。イベントベースのタイミングの詳細については SMIL 2.1 タイミングと同期のイベントベースのタイミングとスケジュールされたタイミングの統合 ([SMIL21], 10.11 節) を参照のこと。 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 dispatched to the event-base element. The list of event names available for use as the event-ref value can be found in the "Animation event name" column of the Complete list of supported events table. Details of event-based timing are described in the Unifying event based and scheduled timing section of SMIL 2.1 Timing and Synchronization ([SMIL21], section 10.11).

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

条件付きの repeat イベントとオプションの要素始動までの時間差を記述する。要素始動は、整数（正でなければならない）で指定された反復回数を含んだ repeatEvent イベントが event-base 要素へ配送される時刻に相対的なものとして定義される。 Describes a qualified repeat event and an optional offset that will begin the element. The element begin is defined relative to the time that the repeatEvent event is dispatched to the event-base element with the iteration value specified by the integer, which must be positive.

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

キー押下げイベントとオプションの要素始動までの時間差を記述する。要素始動は、指定されたキーに対応する keydown イベントの時刻に相対的なものとして定義される。形式的な処理モデルで述べるなら、 accessKey-value は、 stopPropagation() と preventDefault() がいずれも捕獲過程で呼び出されたかのようにふるまう文書の keydown イベントリスナに対応する（このふるまいにより生じる結果についてはイベントフローを見よ）。 Describes a key press event and an optional offset that will begin the element. The element begin is defined relative to the time of the keydown event corresponding to the specified key. From a formal processing model perspective, an accessKey-value corresponds to a keydown event listener on the document which behaves as if stopPropagation() and preventDefault() have both been invoked in the capture phase. (See Event flow for consequences of this behavior.)

character 値は次の２種：キー識別子集合に挙げたキーボードイベント識別文字列の一つか、１個の Unicode 文字 [UNICODE] のいずれかになる。後者の場合、その文字は accessKey-value イベントリスナの処理目的においてはキー識別子に変換される。例えば 'accessKey(Q)' は 'accessKey(U+0051)' が用いられたかのように、 "U+0051" をキー識別文字列として keydown イベントリスナに変換される。 The character value can be one of two types. It can be any of the keyboard event identifier strings listed in the key identifiers set. Alternatively, this value can be a single Unicode character [UNICODE]. In this case, the single character is mapped to a keyboard identifier for the purpose of processing the accessKey-value event listener. For example, 'accessKey(Q)' will translate into a keydown event listener using "U+0051" as the target keyboard identifier string, as if 'accessKey(U+0051)' were used.

"indefinite"

アニメーション始動は beginElement() メソッド呼び出しまたは要素へのハイパーリンク呼び出しにより定まる。（ハイパーリンクベースのタイミングについては SMIL 2.1 タイミングと同期：ハイパーリンクとタイミングを参照のこと。） The begin of the animation will be determined by a beginElement() method call or a hyperlink targeted to the element. (Hyperlink-based timing is described in SMIL 2.1 Timing and Synchronization: Hyperlinks and timing.)

SVG においては、 begin が指定されていない場合の時間コンテナの既定のタイミングはオフセット値 '0' と等価になる。 begin 属性がリストそのものあるいはリスト内の個々の値において構文的に無効であった場合、 begin を１個の値 'indefinite' としたものと等価になる。 In SVG, if no 'begin' is specified, the default timing of the time container is equivalent to an offset value of '0'. If the 'begin' attribute is syntactically invalid, in the list itself or in any of the individual list values, it is equivalent to a single 'begin' value of 'indefinite'.

この仕様で明示する SVG 特有の規則を除き、この属性の正式な定義は SMIL 2.1 タイミングと同期の基本的タイミングサポートの節で与えられる。タイミング指定子のパース ([SMIL21], 10.4.1 節) に述べられている Id-value と event-ref に対する特別なパース規則も参照のこと。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the basic timing support section of SMIL 2.1 Timing and Synchronization. See also the special parsing rules for Id-value and event-ref as described in the Parsing timing specifiers ([SMIL21], section 10.4.1).

アニメーション：不可

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

単純持続時間（simple duration）を指定する。属性値は次のいずれか： Specifies the simple duration. The attribute value can one of the following:

<Clock-value>

単純持続時間を文書時刻における長さで指定する。値は０より大きくなければならない。 Specifies the length of the simple duration in document time. Value must be greater than 0.

media

単純持続時間をメディア固有の持続時間として指定する。これはメディアを定義する要素においてのみ有効になる。 Specifies the simple duration as the intrinsic media duration. This is only valid for elements that define media.

SVG のアニメーション要素においては、 'media' が指定された場合、この属性は無視される。 For SVG's animation elements, if 'media' is specified, the attribute will be ignored.

indefinite

単純持続時間は不定であるものと指定する。 Specifies the simple duration as indefinite.

アニメーションが dur 属性を持たない場合、単純持続時間は不定である。単純持続時間が不定の場合、補間が効かないことに注意（それでも set 要素には有用だが）。 If the animation does not have a 'dur' attribute, the simple duration is indefinite. Note that interpolation will not work if the simple duration is indefinite (although this may still be useful for 'set' elements).

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 タイミングと同期の dur 値の意味内容 ([SMIL21], 10.4.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Dur value semantics section of SMIL 2.1 Timing and Synchronization ([SMIL21], section 10.4.1).

アニメーション：不可

end = "end-value-list"

アニメーションの活動持続時間を制約する停止時刻を定義する。属性値はセミコロン区切りの値のリスト。 Defines an end value for the animation that can constrain the active duration. The attribute value is a semicolon separated list of values.

end-value-list ::= end-value (S? ";" S? end-value-list )?: 停止値のセミコロン区切りの値のリスト。停止時刻のリストに対する解釈は下で詳しく述べる。 A semicolon separated list of end values. The interpretation of a list of end times is detailed below.
end-value ::= ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | "indefinite" ): アニメーションの活動停止を記述する。 Describes the active end of the animation.

値 'indefinite' はアニメーションの停止が endElement() メソッド呼び出しで定まることを指定する。 A value of 'indefinite' specifies that the end of the animation will be determined by an endElement() method call.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 タイミングと同期の基本的タイミングサポートの節を参照のこと。タイミング指定子のパース ([SMIL21], 10.4.1 節) に述べられている Id-value と event-ref に対する特別なパース規則も参照のこと。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the basic timing support section of SMIL 2.1 Timing and Synchronization. See also the special parsing rules for Id-value and event-ref as described in the Parsing timing specifiers ([SMIL21], section 10.4.1).

アニメーション：不可

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

活動持続時間の最小値を指定する。属性値は次のいずれかを取り得る： Specifies the minimum value of the active duration. The attribute value can be either of the following:

<Clock-value>

活動持続時間の最小値を局所時間で測った時間の長さで指定する。【局所時間（ local time ）：時間の「長さ」は局所的な時間軸に依存する（個別の処理の時間軸に依存する）という意味？】 Specifies the length of the minimum value of the active duration, measured in local time.

値は０より大きくなければならない。 The value must be greater than 0.

media

活動持続時間の最小値をメディア固有の持続時間として指定する。これはメディアを定義する要素においてのみ有効である Specifies the minimum value of the active duration as the intrinsic media duration. This is only valid for elements that define media.

min に対する省略値は '0' 。これは活動持続時間に対し制約を一切かけない。 The lacuna value for 'min' is '0'. This does not constrain the active duration at all.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 タイミングと同期の活動持続時間の更なる制御 ([SMIL21], 10.4.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the More control over the active duration section of SMIL 2.1 Timing and Synchronization. ([SMIL21], section 10.4.1).

アニメーション：不可

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

活動持続時間の最大値を指定する。属性値は次のいずれかを取り得る： Specifies the maximum value of the active duration. The attribute value can be either of the following:

<Clock-value>

活動持続時間の最大値を局所時間で測った時間の長さで指定する。 Specifies the length of the maximum value of the active duration, measured in local time.

値は０より大きくなければならない。 The value must be greater than 0.

media

活動持続時間の最大値をメディア固有の持続時間として指定する。これはメディアを定義する要素においてのみ有効である。 Specifies the maximum value of the active duration as the intrinsic media duration. This is only valid for elements that define media.

max に対する省略値は存在しない。省略された場合、活動持続時間に対する制約はかけられない。 There is no lacuna value for 'max'. If omitted, the active duration is not constrained at all.

アニメーション：不可

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

always: アニメーションは任意の時刻に再始動（ restart ）可能。これが省略値。 The animation can be restarted at any time. This is the lacuna value.
whenNotActive: アニメーションは活動中でない間（すなわち活動停止後）に限り再始動可能。活動中にアニメーションの再始動を試みた場合は無視される。 The animation can only be restarted when it is not active (i.e. after the active end). Attempts to restart the animation during its active duration are ignored.
never: 要素は親の時間コンテナの現在の単純持続時間の残余まで再始動不能。（ SVG においては、親の時間コンテナは SVG 文書片なので、アニメーションは文書持続時間が尽きるまで再始動不能である。） 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, the animation cannot be restarted for the remainder of the document duration.)

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 タイミングと同期の restart 属性 ([SMIL21], 10.4.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in The restart attribute section of SMIL 2.1 Timing and Synchronization ([SMIL21], section 10.4.1).

アニメーション：不可

repeatCount = "<number>" | "indefinite"

アニメーション関数【対象要素の単純持続時間において時刻からアニメーション対象の属性／プロパティ値への写像を定める関数】の反復回数を指定する。次の値のいずれかを取り得る： Specifies the number of iterations of the animation function. It can have the following attribute values:

<number>: 反復回数を指定する（ 10 進数の）浮動小数点値。小数により部分的な反復を記述できる。小数値は単純持続時間 ([SMIL21], 3.5.2 節) の一部分を表す。値は０より大きくなければならない。 This is a (base 10) "floating point" numeric value that specifies the number of iterations. It can include partial iterations expressed as fraction values. A fractional value describes a portion of the simple duration ([SMIL21], section 3.5.2). Values must be greater than 0.
indefinite: アニメーションの反復回数は不定であるものと定められる（すなわち文書停止まで）。 The animation is defined to repeat indefinitely (i.e. until the document ends).

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 タイミングと同期の要素の反復 ([SMIL21], 10.4.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Repeating elements section of SMIL 2.1 Timing and Synchronization ([SMIL21], section 10.4.1).

アニメーション：不可

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

反復の全持続時間を指定する。次の値のいずれかを取り得る： Specifies the total duration for repeat. It can have the following attribute values:

<Clock-value>: 文書時刻における、アニメーション関数 f(t) ([SMIL21], 3.3.1 節) が反復される持続時間を指定する。 Specifies the duration in document time to repeat the animation function f(t) ([SMIL21], section 3.3.1).
"indefinite": アニメーションの反復は不定であるものと定められる（すなわち文書停止まで）。 The animation is defined to repeat indefinitely (i.e. until the document ends).

アニメーション：不可

fill = "freeze" | "remove"

この属性は次のいずれかの値を取り得る： This attribute can have the following values:

freeze

アニメーション効果 f(t) ([SMIL21], 3.3.1 節) は活動停止時に最後の効果値に凍結されるものと定義される。不連続アニメーションの場合、凍結に利用される値は活動停止直前のアニメーション値になることに注意。アニメーション効果は文書持続時間が尽きるまで（あるいはアニメーションが再始動されるまで）「静止」する — restart 属性 ([SMIL21], 10.4.1 節) を参照のこと。 The animation effect f(t) ([SMIL21], section 3.3.1) is defined to freeze the effect value at the last value of the active duration. Note that in the case of discrete animation, the frozen value that is used is the value of the animation just before the end of the active duration. The animation effect is "frozen" for the remainder of the document duration (or until the animation is restarted — see The restart attribute ([SMIL21], section 10.4.1).

remove

アニメーション効果は活動停止時に取り除かれる（これ以上適用されない）。アニメーションの活動停止後、アニメーションはそれ以降対象に影響を与えない（アニメーションが再始動されない限り — restart 属性 ([SMIL21], 10.4.1 節) を参照のこと。 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 The restart attribute ([SMIL21], section 10.4.1).

これが省略値。 This is the lacuna value.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 タイミングと同期の要素の拡張 ([SMIL21], 10.4.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Extending an element section of SMIL 2.1 Timing and Synchronization ([SMIL21], section 10.4.1).

アニメーション：不可

上記属性についての処理規則の詳細は SMIL 2.1 に定められている。 SMIL 2.1 defines the detailed processing rules associated with the above attributes.

event-base 要素

この節は情報を提供する。 This section is informative.

event-base 要素についての正式な定義は SMIL 2.1 Animation Modules ([SMIL21], 3 節) と、この仕様のマルチメディアの節を参照のこと。アニメーション要素と discard 要素に対する既定の event-base 要素は、アニメーション対象の要素であり、 xlink:href 属性の IRI が指す対象か、さもなければ、親要素になる。すべての SVG メディア要素（すなわち audio, video, animation ）に対し、既定の event-base 要素はその要素自身になる。 Id-value が前置されたすべての event-value に対し、 event-base 要素はその ID で指示される要素になる。 For a normative definition of event-base elements, see the SMIL 2.1 Animation Modules ([SMIL21], section 3) and the Multimedia section of this specification. For animation elements and the 'discard' element, the default event-base element is the animation target, which for elements with an 'xlink:href' attribute is the target IRI, and is otherwise the parent element. The default event-base element for all SVG media elements (e.g. 'audio', 'video' and 'animation') is the element itself. For all event-values that are prefaced with an Id-value, the event-base element is the element indicated by that ID.

文書作成にあたっての注記： audio 要素などの描画されない要素は利用者の行為によるポインタイベントを受け取れないので、 UI イベントを利用するような際には、文書作成者は描画される要素を event-base 要素として指定することが推奨される。 Authoring note: non-rendered elements such as the 'audio' element cannot receive user-initiated pointer events, so it is recommended that authors specify a rendered element as the event-base element for such cases when using user interface events.

計時値

計時値（ Clock value ）の構文は SMIL 2.1 で定められる計時値の構文 ([SMIL21], 10.4.1 節) によるもののサブセットになる： Clock values have a subsetted syntax of the clock values syntax defined in SMIL 2.1 ([SMIL21], section 10.4.1):

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

計時値に対する既定の計量単位接尾辞は "s"（秒）である。先頭と末尾の空白文字は無視されるが中途の空白は許容されない。 For timecount values, the default metric suffix is "s" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.

計時値は文書時刻を記述する。 Clock values describe document time.

次は合法な計時値の例である： The following are examples of legal clock values:

計時値：
30s     = 30 秒
5ms     = 5 ミリ秒
12.467 = 12 秒 + 467 ミリ秒 Timecount values:
30s     = 30 seconds
5ms     = 5 milliseconds
12.467 = 12 seconds and 467 milliseconds

小数値は秒を定める（ 10 進）浮動小数点数として扱われる。よって： Fractional values are just (base 10) floating point definitions of seconds. Thus:

00.5s = 500 ミリ秒 00.5s = 500 milliseconds

16.2.9 時経過に伴うアニメーション値を定義する属性

以下に述べる属性は要素 animate, animateMotion, animateColor, animateTransform に共通である。これらの属性は対象となる属性またはプロパティに時経過に伴ってあてがわれる値を定める。以下の属性はキーフレームの相対的タイミングと個々の値に用いる補間手法の制御を提供する。 The following attributes are common to elements 'animate', 'animateMotion', 'animateColor' and 'animateTransform'. 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 to be used between particular values.

Schema: animatevalue

    <define name='svg.AnimateToCommon.attr' combine='interleave'>
      <optional><attribute name='to' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

    <define name='svg.AnimateValueCommon.attr'>
      <ref name='svg.AnimateToCommon.attr'/>
      <optional>
        <attribute name='calcMode' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>discrete</value>
            <value>linear</value>
            <value>paced</value>
            <value>spline</value>
          </choice>
        </attribute>
      </optional>
      <optional><attribute name='values' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='keyTimes' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='keySplines' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='from' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='by' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

属性定義：

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

アニメーションの補間モードを指定する。以下に挙げる値を取り得る。省略値は animateMotion 要素では 'paced', それ以外では 'linear' 。ただし、対象の属性が線型補間をサポートしない属性（例えば <string> 型の属性に対するアニメーション）の場合、 calcMode は無視され、不連続（ discrete ）アニメーションが用いられる。 Specifies the interpolation mode for the animation. This can take any of the following values. The lacuna value is 'linear', except on 'animateMotion' elements where it is 'paced'. However if the target attribute does not support interpolation (e.g. when animating an attribute whose type is <string>), the 'calcMode' attribute is ignored and discrete animation is used.

discrete: アニメーション関数は補間を行わずに値から次の値へ飛び飛びに移ることを指定する。 This specifies that the animation function will jump from one value to the next without any interpolation.
linear: 値の単純線型補間によりアニメーション関数の計算を行うことを指定する。 Simple linear interpolation between values is used to calculate the animation function.
paced: 一定歩調のアニメーションの進行を生成する補間を定める。これは適切な距離関数が定義されたデータ型においてのみサポートされる。このデータ型にはスカラー数型および、定速アニメーションと複合型に挙げられる型のみが含まれる。 'paced' が指定された場合、 keyTimes や keySplines は無視されることになる。文書作成者には距離関数が定義されていないデータ型に対する定速アニメーションの利用は奨励されない。一部の UA において予測不能なふるまいを生じさせるので。 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 Paced animation and complex types. If 'paced' is specified, any 'keyTimes' or 'keySplines' will be ignored. Authors are discouraged from using paced animation on types that do not have a distance function defined, due to its unpredictable behavior in some user agents.
spline: values リスト内の値から次の値への補間を３次ベジェ・スプラインで定義される時間関数に従って行う。スプラインの点は keyTimes 属性で指定され、各区間に対する制御点は keySplines 属性内で指定される。 Interpolates from one value in the 'values' list to the next according to a time function defined by a cubic Bézier spline. The points of the spline are specified in the 'keyTimes' attribute, and the control points for each interval are specified in the 'keySplines' attribute.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の単純アニメーション関数属性 ([SMIL21], 3.5.2 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Simple animation function attributes section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.2).

アニメーション：不可

values = "<list>"

１つ以上の値のセミコロン区切りのリスト。ベクトル値の属性は attributeType が属する領域のベクトル構文を用いてサポートされる。 A semicolon-separated list of one or more values. Vector-valued attributes are supported using the vector syntax of the 'attributeType' domain.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の単純アニメーション関数属性 ([SMIL21], 3.5.2 節) で与えられる。 SMIL 仕様により、先頭および末尾、あるいはセミコロンの前後の空白文字は許され、それらは無視されることになることに注意。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Simple animation function attributes section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.2). Note that, per the SMIL specification, leading and trailing white space, and white space before and after semi-colon separators, is allowed and will be ignored.

アニメーション：不可

keyTimes = "<list>"

アニメーションの歩調の制御に用いられる時比率値のセミコロン区切りのリスト。リスト内の各時比率値は values 属性のリスト中の値に対応し、その値がいつアニメーション関数で用いられるかを定める。 keyTimes リスト中の各時比率値は [0..1] 区間（両端を含む）の浮動小数点数として指定され、アニメーション要素の単純持続時間に対する比率による時間を表す。 A semicolon-separated list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the 'values' attribute list, and defines when the value is used in the animation function. Each time value in the 'keyTimes' list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the simple duration of the animation element.

keyTimes が指定された場合、 keyTimes リストに与える値の個数と values リストに与える値の個数は一致していなければならない。 If a list of 'keyTimes' is specified, there must be exactly as many values in the 'keyTimes' list as in the 'values' list.

連続する２つの時比率において、後の値は前の値以上でなければならない。 Each successive time value must be greater than or equal to the preceding time value.

keyTimes リストの意味内容は補間モードに依存する： The 'keyTimes' list semantics depends upon the interpolation mode:

線型（ linear ）とスプライン（ spline ）アニメーションでは、リストの最初の時比率は 0 でなければならず、最後の時比率は 1 でなければならい。各時比率に対応する keyTimes 値はいつアニメーション値を設定するかを定める。すなわち値は keyTimes 間で補間される。 For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The 'keyTimes' value associated with each value defines when the value is set; values are interpolated between the 'keyTimes'.
不連続（ discrete ）アニメーションでは、リストの最初の時刻値は 0 でなければならない。各時比率に対応する時刻はいつ値を設定するかを定める。アニメーション関数には keyTimes で定められる次の時刻までその値が用いられる。 For discrete animation, the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in 'keyTimes'.

補間モードが 'paced' の場合、 keyTimes 属性は無視される。 If the interpolation mode is 'paced', the 'keyTimes' attribute is ignored.

keyTimes 属性が上の要件に適合しない値を持つ場合、 keyTimes 属性はサポート外の値を持つものとして扱われ、属性が指定されなかったかのように処理されるものとする。 If the 'keyTimes' attribute has a value that doesn't conform to the above requirements the 'keyTimes' attribute has an unsupported value and is processed as if the attribute had not been specified.

単純持続時間が不定の場合、 keyTimes の指定は無視される。 If the simple duration is indefinite, any 'keyTimes' specification will be ignored.

一部の値の型には定速アニメーション補間は指定されていないので、文書作成者には、これらの型に対する固有の補間のふるまいを得るためには、計算済みの keyTimes による 'linear' アニメーション補間の利用が奨励される。 Because paced animation interpolation is unspecified for some value types, authors are encouraged to use 'linear' animation interpolation with calculated 'keyTimes' to achieve particular interpolation behavior for these types.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の計算モード属性 ([SMIL21], 3.8.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Calculation mode attributes section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.8.1).

アニメーション：不可

keySplines = "<list>"

keyTimes における各時区間に対する歩調を制御する３次ベジェ関数のリストを定める。属性値はセミコロン区切りの制御点記述のリストで記述される。各制御点記述は４つの座標成分組： x1 y1 x2 y2 で与えられ、１つの時区間に対応するベジェ制御点を表す。SMIL 2.1 では、これらの値に対する区切りとしては、前後の空白も許されるコンマもしくは空白のみが許容されていることに注意。 keyTimes の値はベジェ「アンカー点」を表し、 keySplines の値が制御点を表す。従って制御点組の個数は keyTimes に与える値の個数より一つ少なくなければならない。 A set of Bézier control points associated with the 'keyTimes' list, defining a cubic Bézier function that controls interval pacing. The attribute value is a semicolon separated list of control point descriptions. Each control point description is a set of four values: x1 y1 x2 y2, describing the Bézier control points for one time segment. Note SMIL 2.1 allows these values to be separated either by commas with optional white space, or by white space alone. The 'keyTimes' values that define the associated segment are the Bézier "anchor points", and the 'keySplines' values are the control points. Thus, there must be one fewer set of control points than there are 'keyTimes'.

値はすべて [0..1] 区間に含まれていなければならない。 The values must all be in the range 0 to 1.

calcMode が 'spline' に設定されている場合を除き、この属性は無視される。 This attribute is ignored unless the 'calcMode' is set to 'spline'.

keySplines 属性が上の要件に適合しない値を持つ場合、 keySplines 属性はサポート外の値を持つものとして扱われ、属性が指定されなかったかのように処理されるものとする。 If the 'keySplines' attribute has a value that doesn't conform to the above requirements the 'keySplines' attribute has an unsupported value and is processed as if the attribute had not been specified.

アニメーション：不可

from = "<value>"

アニメーションの開始値（starting value）を指定する。 Specifies the starting value of the animation.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の from, to, by で指定される単純アニメーション関数 ([SMIL21], 3.5.4 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Simple animation functions specified by from, to and by section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.4).

アニメーション：不可

to = "<value>"

アニメーションの終了値（ending value）を指定する。 Specifies the ending value of the animation.

アニメーション：不可

by = "<value>"

アニメーションの相対差分値（offset value）を指定する。 Specifies a relative offset value for the animation.

アニメーション：不可

上記属性についての処理規則の詳細は SMIL 2.1 に定められている。 SMIL 2.1 defines the detailed processing rules associated with the above attributes.

values, from, to, by に指定されるアニメーション値は、指定対象の属性において合法でなければならない。先頭と末尾、および区切り文字（セミコロン）の前後の空白は無視されることになる。値が不正だった場合、サポート外として扱われ、指定されなかったかのように処理される。 The animation values specified in the 'values', 'from', 'to' and 'by' attributes must be legal values for the specified target attribute. Leading and trailing white space, and white space before and after semicolon separators, will be ignored. If any values are not legal, they are considered to be unsupported and is processed as if they had not been specified.

values のリストが利用される場合、リストの各値がアニメーションの進行に伴い順番に適用されることになる。 values 属性が指定された場合、 from, to, by 属性の値は無視される。 If a list of 'values' is used, the animation will apply the values in order over the course of the animation. If the 'values' attribute is specified, any 'from', 'to' or 'by' attribute values are ignored.

from, to, by 属性のどれが他より優先されるかも含む、様々な from/to/by アニメーションの類に対する処理規則は from, to, by で指定される単純アニメーション関数 ([SMIL21], 3.5.4 節) を参照のこと。 The processing rules for the variants of from/to/by animations, including which of the 'from', 'to' and 'by' attributes take precedence over the others, is described in Simple animation functions specified by from, to and by ([SMIL21], section 3.5.4).

プロパティのアニメーションにおける補間は算出値に対して行われる。従って inherit のようなキーワードも算出値が数値になるなら補間アニメーションに用いる値のリストに含めてもよい。例えば values="red; inherit; blue" を用いる fill プロパティに対する線型アニメーションも、inherit の算出値がペイントサーバ参照, システムペイント, 値 none のいずれにもならない限り、可能になる。 When animating properties, interpolation is performed on computed values. Thus, keywords such as inherit which yield a numeric computed value may be included in the values list for an interpolated animation. For example, a linear animation of the 'fill' property using values="red; inherit; blue" is possible as long as the inherit value does not compute to a paint server reference, a system paint or the none value.

次の図に keySplines 属性による補間を示す。各グラフは一つの時区間（すなわち keyTimes と values のリスト間で対応する値の組）に対する keySplines の設定の効果を示している。横軸は時区間における補間の単位進行に対する入力値 - すなわち時区間における補間を続ける歩調 - を表す。縦軸は keySplines 関数により生成された単位進行あたりの結果を表す。このグラフへの別の見方は、横軸が時区間における入力単位時間、縦軸が出力単位時間というものである。 SMIL 2.1 タイミングと同期のタイミングと現実世界の時刻 ([SMIL21], 10.4.3 節) も参照のこと。【理解しにくい訳なので補足すると、横軸の [0, 1] 区間が 'keySplines' の中の時刻から次の時刻までに対応する局所的な時間軸で、縦軸の [0, 1] 区間が 'values' の中の値から次の値までに対応する局所的な値の範囲。】 The following figure illustrates the interpretation of the 'keySplines' attribute. Each diagram illustrates the effect of 'keySplines' settings for a single interval (i.e. between the associated pairs of values in the 'keyTimes' and 'values' lists). The horizontal axis can be thought of as the input value for the unit progress of interpolation within the interval, i.e. the pace with which interpolation proceeds along the given interval. The vertical axis is the resulting value for the unit progress, yielded by the 'keySplines' function. Another way of describing this is that the horizontal axis is the input unit time for the interval, and the vertical axis is the output unit time. See also the Timing and real-world clock times section in SMIL 2.1 Timing and Synchronization ([SMIL21], section 10.4.3).

Examples of keySplines
keySplines="0 0 1 1" (the default)	keySplines=".5 0 .5 1"
keySplines="0 .75 .25 1"	keySplines="1 0 .25 .25"

計算の説明のため、単純な例で考える： To illustrate the calculations, consider the simple example:

<animate dur="4s" values="10; 20" keyTimes="0; 1"
     calcMode="spline" keySplines="{上の図の４つのうちいずれか}"/>

上の各４通りの場合に対する keySplines 値の利用による、アニメーションの進行に伴う補間による近似値は： Using the 'keySplines' values for each of the four cases above, the approximate interpolated values as the animation proceeds are:

keySplines 値	開始値	1 秒後	2 秒後	3 秒後	終了値
0 0 1 1	10.0	12.5	15.0	17.5	20.0
.5 0 .5 1	10.0	11.0	15.0	19.0	20.0
0 .75 .25 1	10.0	18.0	19.3	19.8	20.0
1 0 .25 .25	10.0	10.1	10.6	16.9	20.0

ベジェスプラインの計算の公式的な定義は [FOLEY-VANDAM], 488-491 頁を参照のこと。 For a formal definition of Bézier spline calculation, see [FOLEY-VANDAM], pp. 488-491.

16.2.10 アニメーションが加算可能かどうかを制御する属性

アニメーションの定義においては属性値を絶対的な値より差分として与える方が役立つことが多い。単純な「増大」アニメーションでオブジェクトの幅を 10 単位増やすことができる： It is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values. A simple "grow" animation can increase the width of an object by 10 units:

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

アニメーションの繰り返しにおいては、前の結果に基づいて各反復を累積して構築することがしばしば有用になる。次の例ではアニメーションが反復されるごとに矩形が増大し続ける： It is frequently useful for repeated animations to build upon the previous results, accumulating with each iteration. The following example causes the rectangle to continue to grow with each repeat of the animation:

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

最初の反復が終了した時点で、矩形は幅 30 単位になる。２回目の反復終了時には幅 40 単位、５回目の反復終了時には幅 70 単位になる。 At the end of the first repetition, the rectangle has a width of 30 units. At the end of the second repetition, the rectangle has a width of 40 units. At the end of the fifth repetition, the rectangle has a width of 70 units.

加算アニメーションについての詳細は Additive animation ([SMIL21], 3.3.6 節) を参照のこと。累積的アニメーションについての詳細は Cumulative animation ([SMIL21], 3.3.5 節) を参照のこと。 For more information about additive animations, see Additive animation ([SMIL21], section 3.3.6) and for more information on cumulative animations, see Cumulative animation ([SMIL21], section 3.3.5).

次の属性は要素 animate, animateMotion, animateColor, animateTransform に共通して利用される。 The following attributes are common to elements 'animate', 'animateMotion', 'animateColor' and 'animateTransform'.

Schema: animateaddition

    <define name='svg.AnimateAdditionCommon.attr'>
      <optional>
        <attribute name='additive' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>replace</value>
            <value>sum</value>
          </choice>
        </attribute>
      </optional>
      <optional>
        <attribute name='accumulate' svg:animatable='false' svg:inheritable='false'>
          <choice>
            <value>none</value>
            <value>sum</value>
          </choice>
        </attribute>
      </optional>
    </define>

属性定義：

additive = "replace" | "sum"

アニメーションが加算可能（ additive ）であるかどうかを指定する。 Controls whether or not the animation is additive.

sum: アニメーションにおいて、属性の下層値と他の低優先度アニメーションに対する加算を指示する。【下層値 — 加算アニメーションの下では他のアニメーションにより変更された値がアニメーションの基になる値になり、この文脈において下層値は基底値（アニメーション適用前の属性やプロパティの元の値）を一般化した概念を表す。】 Specifies that the animation will add to the underlying value of the attribute and other lower priority animations.
replace: アニメーションにおいて、属性の下層値と他の低優先度アニメーションに対する上書きを指示する。これが省略値。ただし、そのふるまいは from, to, by で指定される単純アニメーション関数 ([SMIL21], 3.5.4 節) に従い、アニメーション値属性 by, to にも影響される。 Specifies that the animation will override the underlying value of the attribute and other lower priority animations. This is the lacuna value, however the behavior is also affected by the animation value attributes 'by' and 'to', as described in Simple animation functions specified by from, to and by ([SMIL21], section 3.5.4).

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules のアニメーション効果関数属性 ([SMIL21], 3.5.3 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this attribute is found in the Animation effect function attributes section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.3).

アニメーション：不可

accumulate = "none" | "sum"

アニメーションが累積的であるかどうかを指定する。 Controls whether or not the animation is cumulative.

sum: ２回目以降の各反復が前の反復の最終的な値に基づいて行われることを指定する. Specifies that each repeat iteration after the first builds upon the last value of the previous iteration.
none: 反復が累積的でないことを指示する。これが省略値。 Specifies that repeat iterations are not cumulative. This is the lacuna value.

この属性は、対象の属性値が加法をサポートしていない、あるいは要素のアニメーションが反復されない場合、無視される。 This attribute is ignored if the target attribute value does not support addition, or if the animation element does not repeat.

アニメーション関数が to 属性にのみ指定されている場合、この属性は無視される。 This attribute will be ignored if the animation function is specified with only the 'to' attribute.

アニメーション：不可

16.2.11 継承

SVG においては、属性とプロパティ双方に対しアニメーションが可能である。属性やプロパティが子孫要素において継承可能であるならば、 g 要素のような親要素のアニメーションの進行に伴って子孫要素におけるその属性やプロパティのアニメーション値に伝播する効果がある。すなわち、子孫要素はアニメーションの対象となる属性とプロパティを先祖から継承し得る。 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 'g' element has the effect of propagating the attribute or property animation values to descendant elements as the animation proceeds; thus, descendant elements can inherit animated attributes and properties from their ancestors.

16.2.12 animate 要素

animate 要素は１個の属性またはプロパティを時経過に伴ってアニメーションさせるために用いられる。例えば、次のように指定すれば矩形は 5 秒間でフェードアウトする： The 'animate' element is used to animate a single attribute or property over time. For example, to make a rectangle repeatedly fade away over 5 seconds, you can specify:

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

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の animate 要素 ([SMIL21], 3.6.1 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is found in The animate element section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.6.1).

Schema: animate

    <define name='animate'>
      <element name='animate'>
        <ref name='animate.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='animate.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
    </define>

animate 要素がアニメーション可能な属性とプロパティの一覧はアニメーション可能な属性とプロパティを見よ。 For a list of attributes and properties that can be animated using the 'animate' element, see Attributes and properties that can be animated.

animate 要素が色値のアニメーションを行う場合、 animateColor 要素と同じ計算方法が用いられる。すなわち、 animate と animateColor は色のアニメーションに関しては同一になる。 In the case where an 'animate' element is animating a color value, the same calculation method as the 'animateColor' element is used. That is, 'animate' and 'animateColor' have identical behavior when animating colors.

16.2.13 set 要素

set 要素は単に指定された持続時間だけ属性に値を設定するための手段を提供する。これは文字列や真偽値など補間ができないものなども含めた、ほとんどの属性型をサポートする。 set 要素は加算もしくは累積的なアニメーションを行えない。 additive および accumulate 属性は指定されたとしても無視されることになる。 The 'set' element provides a simple means of just setting the value of an attribute for a specified duration. It supports most attribute types, including those that cannot be interpolated, such as string and boolean values. The 'set' element cannot perform additive or cumulative animation; the 'additive' and 'accumulate' attributes will be ignored if specified.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の set 要素 ([SMIL21], 3.6.2 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is found in The set element section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.6.2).

Schema: set

    <define name='set'>
      <element name='set'>
        <ref name='set.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='set.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateToCommon.attr'/>
    </define>

属性定義：

to = "<value>"

set 要素の持続時間においてアニメーション対象の属性がとる値を指定する。値は対象の属性に従う適切な型でなければならない。 Specifies the value for the attribute during the duration of the 'set' element. The value must be of an appropriate type according to the target attribute being animated.

アニメーション：不可

set 要素によりアニメーション可能な属性とプロパティの一覧はアニメーション可能な属性とプロパティを見よ。 For a list of attributes and properties that can be animated using the 'set' element, see Attributes and properties that can be animated.

16.2.14 animateMotion 要素

animateMotion 要素の対象の要素はモーションパスに沿って動かされる。 The 'animateMotion' element causes its target element to move along a motion path.

transform 属性を持てる要素にはモーションアニメーションを適用できる。これらの要素の一覧は付録の属性とプロパティ一覧の transform 属性を見よ。 Any element that can take a 'transform' attribute may have motion animations applied to it. See the transform attribute in the attribute table appendix for a list of these elements.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の animateMotion 要素 ([SMIL21], 3.6.3 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is found in The animateMotion element section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.6.3).

Schema: animateMotion

    <define name='animateMotion'>
      <element name='animateMotion'>
        <ref name='animateMotion.AT'/>
        <zeroOrMore>
          <ref name='animateCommon.CM'/>
        </zeroOrMore>
        <optional>
          <ref name='mpath'/>
        </optional>
        <zeroOrMore>
          <ref name='animateCommon.CM'/>
        </zeroOrMore>
      </element>
    </define>

    <define name='animateMotion.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <optional><attribute name='path' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='keyPoints' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='rotate' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
      <optional><attribute name='origin' svg:animatable='false' svg:inheritable='false'><text/></attribute></optional>
    </define>

属性定義：

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

アニメーションの補間モードを指示する。上に示した calcMode 属性の全般的説明を見よ。唯一の違いは animateMotion に対する calcMode の省略値が 'paced' になっていることである。 Specifies the interpolation mode for the animation. Refer to general description of the 'calcMode' attribute above. The only difference is that the lacuna value of the 'calcMode' attribute for 'animateMotion' is 'paced'.

アニメーション：不可

path = "<path-data>"

モーションパス。値は path 要素の d 属性と同じように表記され、解釈される。モーションパス・アニメーションによる効果により、対象要素の CTM に対し後置積をとる追加の変換行列が与えられ、時経過に伴って算出される (x, y) 値により現在の利用座標系に対する x, y 軸に沿う並進を生じさせる。 The motion path, expressed in the same format and interpreted the same way as the 'd' attribute on the 'path' element. The effect of a motion path animation is to post-multiply a supplemental transformation matrix onto the CTM for the target element which 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.

アニメーション：不可

keyPoints = "<list-of numbers>"

セミコロン区切りの [0..1] 区間内の浮動小数点数のリストを値に取り、対応する keyTimes 属性に指定された値による時刻に、モーションパスに沿って対象要素をどれだけの距離まで動かすかを指示する。距離の計算は UA のパスに沿う距離アルゴリズムによる。リストの各進行値が keyTimes 属性に与えるリスト内の各値に対応する。 Takes a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the target element shall move at the moment in time specified by corresponding 'keyTimes' value. Distance calculations use the user agent's distance along the path algorithm. Each progress value in the list corresponds to a value in the 'keyTimes' attribute list.

keyPoints が指定された場合、 keyPoints リストに与える値の個数と keyTimes リストに与える値の個数は一致していなければならない。 If a list of 'keyPoints' is specified, there must be exactly as many values in the 'keyPoints' list as in the 'keyTimes' list.

keyPoints 属性が上の要件に適合しない値を持つ場合、サポート外の値として扱われ、アニメーション要素は属性が指定されなかったかのように処理されるものとする。 If the 'keyPoints' attribute has a value that doesn't conform to the above requirements, the attribute has an unsupported value and the animation element is processed as if the attribute had not been specified.

アニメーション：不可

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

rotate 属性により、対象要素の CTM に対し後置積をとる追加の変換行列が与えられ、時経過に伴って算出される (x, y) 値により現在の利用座標系に対し、その原点を中心とする回転変換が適用される。回転変換は path 属性により算出される追加の並進変換の後に適用される。 The 'rotate' 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 'path' attribute.

auto: 時経過に伴って対象要素をモーションパスの向きの角度（すなわちパス方向に従う接線ベクトル）へ回転させることを指示する。 Indicates that the target element is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path.
auto-reverse: 時経過に伴って対象要素をモーションパスの向きを180度回転させた角度（すなわちパス方向に従う接線ベクトル）へ回転させることを指示する。 Indicates that the target element is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path plus 180 degrees.
<number>: 対象要素に指定された数値の角度による一定角度の回転変換を適用することを指示する。 Indicates that the target element has a constant rotation transformation applied to it, where the rotation angle is the specified number of degrees.

省略値は '0'. The lacuna value is '0'.

アニメーション：不可

origin = "default"

SMIL 2.1 definition of 'origin' ([SMIL21], 3.6.3 節) を見よ。 SVG においては何の効果も生じさせない。指定された場合の値は 'default' を取らなければならない。 See the SMIL 2.1 definition of 'origin' ([SMIL21], section 3.6.3). It has no effect in SVG, and if specified, must take the value 'default'.

アニメーション：不可

animateMotion においては、空白および／またはコンマ区切りのＸ,Ｙ座標成分ペアを from, by, to, values 属性に与える。例えば from="33,15" は、Ｘ座標に値 33, Ｙ座標に値 15 を指定する。 For 'animateMotion', the specified values for 'from', 'by', 'to' and 'values' consist of (x, y) coordinate pairs, with a single comma and/or white space separating the x coordinate from the y coordinate. For example, from="33,15" specifies an x coordinate value of 33 and a y coordinate value of 15.

values 属性が与えられる場合、その値はＸ, Ｙ座標成分ペアのリストからなる。Ｘ, Ｙ座標は少なくとも１つのスペース文字またはコンマで区切られていなければならない。区切り文字の前後に空白文字があっても良い。例えば、 values="10,20;30,20;30,40" は３個の座標成分ペアのリストを指定する。各座標成分は <length> を表す。属性 from, by, to, values は、モーションパスを表す、対象要素の利用座標系における図形を指定する。 If provided, the 'values' attribute must consist of a list of (x, y) coordinate pairs. Coordinate values are separated by at least one white space character or a comma. Additional white space around the separator is allowed. For example, values="10,20;30,20;30,40" specifies a list of three coordinate pairs. Each coordinate is represented by a <length>. Attributes 'from', 'by', 'to' and 'values' specify a shape in the target element's user coordinate system which represents the motion path.

SVG のパスデータ命令を用いてモーションパスを定義する２つの方法が用意されている： Two options are available to define a motion path using SVG path data commands:

path 属性により、 SVG のパスデータ命令を用いて animateMotion 要素のモーションパスを直接定義する。 a 'path' attribute, which defines a motion path directly on an 'animateMotion' element using SVG path data commands
animateMotion 要素の mpath 子要素から、モーションパスを定義する外部の path 要素を参照する。 an 'mpath' child element of the 'animateMotion' element, which provides the ability to reference an external 'path' element as the definition of the motion path

animateMotion や mpath 要素に対するいかなるスタイル付けも定義されるパスには影響しないことに注意。例えばストロークをダッシュにしても、アニメーションがダッシュからダッシュへとジャンプしたりはしない。 Note that any styling on an 'animateMotion' or 'mpath' element does not affect the defined path. For example, specifying a dashed stroke will not cause the animation to jump from dash to dash.

図形上を動く点 (x, y) は対象要素の CTM に対し後置積をとる追加の変換行列を与え、時経過に伴って算出される図形の (x, y) 値により現在の利用座標系に対する x, y 軸に沿う並進を生じさせる。すなわち、対象要素は現在の利用座標系の原点から相対的にモーションパスまでの差分だけ並進させられる。この追加的変換は対象要素の transform 属性による変換、あるいはその属性に対し対象要素を対象にする animateTransform 要素によるアニメーションの上に適用される。 The various (x, y) points of the shape provide a supplemental transformation matrix to be post-multiplied onto the CTM of the target element, which causes a translation along the x- and y-axes of the current user coordinate system by the (x, y) values of the shape computed over time. Thus, the target element is translated over time by the offset of the motion path relative to the origin of the current user coordinate system. The supplemental transformation is applied on top of any transformations due to the target element's 'transform' attribute or any animations on that attribute due to 'animateTransform' elements targetting that element.

additive と accumulate 属性は animateMotion 要素に適用される。複数の animateMotion 要素が同時に同じ対象要素を参照する場合、それらは互いに加算可能となり得る。しかしながら、 animateMotion 要素による変換は対象要素の transform 属性または animateTransform 要素に対し常に追加的である。 The 'additive' and 'accumulate' attributes apply to 'animateMotion' elements. Multiple 'animateMotion' elements all simultaneously referencing the same target element can be additive with respect to each other; however, the transformations which result from the 'animateMotion' elements are always supplemental to any transformations due to the target element's 'transform' attribute or any 'animateTransform' elements.

animateMotion に対する既定の補間モードは 'paced' である。これは指定されたパスに沿う一定速度のモーションを生成する。 animateMotion 要素は加算可能になれるが、２つ以上の 'paced' （定速）アニメーションの和が組み合わされた結果によるモーションアニメーションが定速になるとは限らないことに注意。 The default interpolation mode for 'animateMotion' is 'paced'. This will produce constant velocity motion along the specified path. Note that while 'animateMotion' elements can be additive, it is important to observe that the addition of two or more 'paced' (constant velocity) animations might not result in a combined motion animation with constant velocity.

animateMotion の calcMode が 'discrete', 'linear', 'spline' のいずれかで、かつ、 keyPoints 属性が指定されていない場合、値の個数はパスデータに "move to" 命令が無い限り、パスで定義された点の個数と同じになる。パスの中途、すなわちパスデータの最初の命令でない "move to" 命令は、持続時間の分割、あるいは keyTimes, keySplines, keyPoints 値との対応付けにおいては追加の点として数えない。 calcMode が 'paced' の場合、すべての "move to" 命令は長さ０を持つ（すなわちそれらは常に瞬間的に生じる）ものとみなされ、歩調の計算では無視される。 When an 'animateMotion' element has a 'calcMode' of 'discrete', 'linear' or 'spline', and if the 'keyPoints' attribute is not specified, the number of values is defined to be the number of points defined by the path, unless there are "move to" commands within the path data. A "move to" command within the path, i.e. other than as the first path data command, does not count as an additional point when dividing up the duration, or when associating 'keyTimes', 'keySplines' and 'keyPoints' values. When 'calcMode' is 'paced', all "move to" commands are considered to have zero length (i.e. they always happen instantaneously), and are not considered when computing the pacing.

モーションパスに沿う速度に対するより柔軟な制御のために、 keyPoints 属性は keyTimes 属性に指定されたリストの各値に対応して、モーションパスに沿う進行を指示することを可能にする。 keyPoints 属性が指定された場合、 keyTimes 属性は values 属性配列で指定される点やモーションパス上の点ではなく、 keyPoints の各値へ適用される。 For more flexibility in controlling the velocity along the motion path, the 'keyPoints' attribute provides the ability to specify the progress along the motion path for each of the 'keyTimes' specified values. If specified, 'keyPoints' causes 'keyTimes' to apply to the values in 'keyPoints' rather than the points specified in the 'values' attribute array or the points on the motion path.

animateMotion における上書き規則は次のようになる。モーションパスの定義における優先順位は、 mpath 要素, path 属性, values 属性, from/by/to 属性の順になる。 keyTimes 属性に対応する点の定義における優先順位は、 keyPoints 属性, path 属性, mpath 要素, values, 属性, from/by/to. 属性の順になる。 The override rules for 'animateMotion' are as follows. Regarding the definition of the motion path, the 'mpath' element overrides the 'path' attribute, which overrides 'values', which overrides 'from'/'by'/'to'. Regarding determining the points that correspond to the 'keyTimes' attribute, the 'keyPoints' attribute overrides 'path' and 'mpath', which overrides 'values', which overrides 'from'/'by'/'to'.

モーションパス・アニメーションの持続時間を dur とするとき、任意の時刻 t における座標 (x, y) は、 UA のパスに沿う距離アルゴリズムを用いて、全長からの比率 (t / dur) の距離までパスに沿って進んだ点として計算される。 At any time t within a motion path animation of duration dur, the computed coordinate pair (x, y) along the motion path is determined by finding the point (x, y) which is (t / dur) distance along the motion path using the user agent's distance along a path algorithm.

下の例の後にモーションパス・アニメーションの進行に伴って算出される追加の変換行列を示す。 The following example demonstrates the supplemental transformation matrices that are computed during a motion path animation.

Example 19_02 にモーションパスに沿って動く３角形を示す。 Example 19_02 shows a triangle moving along a motion path.

Example: 19_02.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.2" baseProfile="tiny" width="5cm" height="3cm" viewBox="0 0 500 300">

  <!-- モーションアニメーションの計算 -->
  <desc>Example 19_02 - demonstrate motion animation computations</desc>

  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2"/>
  <!-- ３つの小さな円を始点, 中間点, 終点とする
          モーションパスの外形線を青色に描く。 -->
  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <path xml:id="path1" d="M100,250 C 100,50 400,50 400,250"
        fill="none" stroke="blue" stroke-width="7.06"/>
  <circle cx="100" cy="250" r="17.64" fill="blue"/>
  <circle cx="250" cy="100" r="17.64" fill="blue"/>
  <circle cx="400" cy="250" r="17.64" fill="blue"/>
  <!-- モーションパスに沿って動かされることになる３角形。
       三角形の底辺が原点の直上を中心に水平になるように
       垂直方向に形状付けられる。 -->
  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06">
    <!-- モーションパス アニメーションを定義する -->
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

0 秒

3 秒後

6 秒後

次の表に上のモーションパス・アニメーションにおける追加的変換行列を示す。 The following table shows the supplemental transformation matrices that are applied to achieve the effect of the motion path animation.

	0 秒	3 秒後	6 秒後
パスに沿う動きに伴う追加の変換	translate(100,250)	translate(250,100)	translate(400,250)
rotate="auto" により生じる追加の変換	rotate(-90)	rotate(0)	rotate(90)

16.2.15 mpath 要素

mpath 要素は既存の path 要素をモーションアニメーションのパスに参照利用するために利用され、パスを利用する animateMotion 要素の子要素としてのみ現れることができる。 The 'mpath' element is used to reference an existing 'path' element for use as a motion animation path. It may appear only as the child of an 'animateMotion' element to which it provides the path.

下の Example mpath01 に描画もされる既存の path 要素を参照する mpath 要素の用例を示す。 mpath を用いない場合、 animateMotion 要素の path 属性にもパスデータを繰り返し記述しなければならなくなる。 Example mpath01 demonstrates the use of an 'mpath' element that references an existing 'path' element that is rendered. Without 'mpath', the path data would have to be repeated in a 'path' attribute on the 'animateMotion' element.

Example: mpath01.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"  
     version="1.2" baseProfile="tiny" viewBox="0 0 80 60">

  <!-- 'mpath' 要素の利用。 -->
  <desc>Example demonstrating the use of the 'mpath' element.</desc>

  <path xml:id="mpathRef" d="M15,43 C15,43 36,20 65,33" fill="none" stroke="black" stroke-width="1"/>
  <circle r="5" fill="blue">
    <animateMotion begin="0s" dur="6s" calcMode="linear" fill="freeze">
      <mpath xlink:href="#mpathRef"/>
    </animateMotion>        
  </circle>
</svg>

2 秒後

4 秒後

6 秒後

Schema: mpath

    <define name='mpath'>
      <element name='mpath'>
        <ref name='mpath.AT'/>
        <zeroOrMore><ref name='svg.Desc.group'/></zeroOrMore>
      </element>
    </define>

    <define name='mpath.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.XLinkRequired.attr'/>
    </define>

属性定義：

xlink:href = "<IRI>"

モーションパスを定義する path 要素への IRI 参照。無効な IRI 参照はサポート外の値。省略値は空文字列。属性値が空でも依然としてアニメーションタイミングは実行されるが、モーションアニメーションは対象要素に適用されなくなる。 An IRI reference to the 'path' element which defines the motion path. An invalid IRI reference is an unsupported value. The lacuna value is the empty string. An empty attribute value results in the animation timing still running but no motion animation will be applied to the target element.

アニメーション：不可

16.2.16 animateColor 要素

animateColor 要素は時経過に伴う色の変化を指定する。 The 'animateColor' element specifies a color transition over time.

この仕様で明示する SVG 特有の規則を除き、この要素の正式な定義は SMIL 2.1 Animation Modules の animateColor 要素 ([SMIL21], 3.6.4 節) で与えられる。 Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is found in The animateColor element section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.6.4).

Schema: animateColor

    <define name='animateColor'>
      <element name='animateColor'>
        <ref name='animateColor.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='animateColor.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
    </define>

from, by, to 属性は色値をとり、各色値は solid-color プロパティと同じ構文で表記される（ <color>, currentColor, inherit いずれか）。更に、追加の値 none もとれる。 values 属性では、同じ構文による色値のセミコロン区切りのリストになる。 The 'from', 'by' and 'to' attributes take color values, where each color value is expressed using the same syntax as is used by the 'solid-color' property (a <color>, currentColor or inherit), or the additional value none. The 'values' attribute takes a semicolon-separated list of color values using that same syntax.

色のアニメーションにおいても、どの値にも 'none' が含まれていない場合に限り、補間アニメーション（すなわち、 calcMode が 'linear', 'paced', 'spline' いずれかによるアニメーション）が行える。そうでなければ、不連続アニメーションのみが可能になる。 Interpolated animation (that is, an animation where 'calcMode' is 'linear', 'paced' or 'spline') can be performed for color animations if none of the values involved is 'none'. Otherwise, only discrete animation can be performed.

範囲外の色値を与えることは可能だが、 UA による処理は実装に依存する。 UA は色値の切り上げ／下げを可能な限り遅らせるべきだが、システム間の違いによりふるまいが一貫しないことがあり得ることに注意。 Out of range color values can be provided, but user agent processing will be implementation dependent. User agents should clamp color values to allow color range values as late as possible, but note that system differences might preclude consistent behavior across different systems.

animateColor 要素によりアニメーション可能な属性とプロパティの一覧はアニメーション可能な属性とプロパティを見よ。 For a list of attributes and properties that can be animated using the 'animateColor' element, see Attributes and properties that can be animated.

16.2.17 animateTransform 要素

animateTransform 要素は対象要素の変換属性に対するアニメーションを行い、それによる並進, 拡縮, 回転, 斜傾などを制御するアニメーションを可能にする。 The 'animateTransform' element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.

Schema: animateTransform

    <define name='animateTransform'>
      <element name='animateTransform'>
        <ref name='animateTransform.AT'/>
        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore>
      </element>
    </define>

    <define name='animateTransform.AT' combine='interleave'>
      <ref name='svg.Core.attr'/>
      <ref name='svg.AnimateCommon.attr'/>
      <ref name='svg.AnimateAttributeCommon.attr'/>
      <ref name='svg.AnimateTiming.attr'/>
      <ref name='svg.AnimateValueCommon.attr'/>
      <ref name='svg.AnimateAdditionCommon.attr'/>
      <ref name='svg.AnimateTypeCommon.attr'/>
    </define>

属性定義：

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

パラメタが時経過に伴って変化する変換の種類を指示する。 type がサポート外の値（例えば type="foo" や type="ref(svg)" ）を持つ場合、 animateTransform 要素は無視される。 Indicates the type of transformation which is to have its values change over time. If 'type' has an unsupported value (e.g. type="foo" or type="ref(svg)") the 'animateTransform' element is ignored.

アニメーション：不可

from, by, to 属性に与える値は変換の種類に応じた構文で記述する： The 'from', 'by' and 'to' attributes take a value expressed using the same syntax that is available for the given transformation type:

type="translate" の場合、個々の値は <tx> [,<ty>] の形式で表記する。 For a type="translate", each individual value is expressed as <tx> [,<ty>].
type="scale" の場合、個々の値は <sx> [,<sy>] の形式で表記する。 For a type="scale", each individual value is expressed as <sx> [,<sy>].
type="rotate" の場合、個々の値は <rotate-angle> [<cx> <cy>] の形式で表記する。 For a type="rotate", each individual value is expressed as <rotate-angle> [<cx> <cy>].
type="skewX" と type="skewY" の場合、個々の値は <skew-angle> の形式で表記する。 For a type="skewX" and type="skewY", each individual value is expressed as <skew-angle>.

（ transform 属性を見よ。） (See The 'transform' attribute.)

animateTransform 要素の values 属性では、セミコロン区切りの値のリストからなり、リストの各値は上の from, by, to と同様に表記する。 The 'values' attribute for the 'animateTransform' element consists of a semicolon-separated list of values, where each individual value is expressed as described above for 'from', 'by' and 'to'.

animateTransform によるアニメーション効果は、 animateTransform 固有のふるまいにより、下層値への加算ではなく、加算 animateTransform アニメーション（下を見よ）の下層値に対する後置積になる The animation effect for 'animateTransform' is post-multiplied to the underlying value for additive 'animateTransform' animations (see below) instead of added to the underlying value, due to the specific behavior of 'animateTransform'.

from-to, from-by, by アニメーション は対応する values アニメーション と等価になるように SMIL で定義されている。 SMIL 2.1 Animation Modules ([SMIL21], 3.5.4 節) の from, to, by で指定される単純アニメーション関数を参照のこと。しかしながら、 to アニメーション は SMIL 2.1 Animation Modules ([SMIL21], 3.5.4 節) の to アニメーションで述べられているように加算と非加算のふるまいが混合される。 to アニメーション は下層値から to 属性値への滑らかな変化を供する固有の機能を持つが、加算変換アニメーションが後置積になるための要件と数学的に衝突する。故に、SVG Tiny 1.2 においては、 animateTransform に対する to アニメーションのふるまいは未定義である。文書作成者には変換アニメーションを望む際は from-to, from-by, by, values アニメーション の利用を薦める。 From-to, from-by and by animations are defined by SMIL to be equivalent to a corresponding values animations. See the Simple animation functions specified by from, to and by section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.4). However, to animations are a mixture of additive and non-additive behavior, as described in the To animation section of the SMIL 2.1 Animation Modules ([SMIL21], section 3.5.4). To animations provide specific functionality to get a smooth change from the underlying value to the 'to' attribute value, which conflicts mathematically with the requirement for additive transform animations to be post-multiplied. As a consequence, in SVG Tiny 1.2 the behavior of to animations for 'animateTransform' is undefined. Authors are suggested to use from-to, from-by, by or values animations to achieve any desired transform animation.

calcMode の値が 'paced' の場合、変換に対する「距離」計算は定速アニメーションと複合型に従う。 If 'calcMode' has the value 'paced', then the "distance" for the transformation is calculated as further described in Paced animations and complex types.

アニメーション活動時における、非加算 animateTransform （すなわち additive="replace" ）による効果は、属性の値を animateTransform で定義される変換に置き換えることである。加算アニメーション（すなわち additive="sum" ）による効果は、この animateTransform で定義される変換に対応する変換行列により、下層値を表現する変換の base セットに対する後置積をとることである。具体的には： When an animation is active, the effect of a non-additive 'animateTransform' (i.e. additive="replace") is to replace the given attribute's value with the transformation defined by the 'animateTransform'. The effect of an additive animation (i.e. additive="sum") is to post-multiply the transformation matrix corresponding to the transformation defined by this 'animateTransform' to the base set of transformations representing the underlying value. To illustrate:

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

上のコードでは、２つのアニメーションのいずれも additive="replace" なので、最初のアニメーションは矩形自身に対する変換を上書きし、２番目のアニメーションは最初のアニメーションによる変換を上書きする。従って、これらのアニメーションによる 5 秒後の結果は次の静止矩形と同じになる： In the code snippet above, because both animations have additive="replace", the first animation overrides the transformation on the rectangle itself and the second animation overrides the transformation from the first animation; therefore, at time 5 seconds, the visual result of the above two animations would be equivalent to the following static rectangle:

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

それに対し、次の例では： whereas in the following example:

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

こちらのコードでは、アニメーションは２つとも additive="sum" なので、最初のアニメーションはその変換による後置積を矩形自身が持つ変換に対してとり、２番目のアニメーションはその変換による後置積を最初のアニメーションの変換に対してとる。従って、これらのアニメーションによる 5 秒後の結果は次の静止矩形と同じである： In this code snippet, because both animations have additive="sum", the first animation post-multiplies its transformation to any transformations on the rectangle itself and the second animation post-multiplies its transformation to any transformation from the first animation; therefore, at time 5 seconds, the visual result of the above two animations would be equivalent to the following static rectangle:

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

animateTransform 要素によりアニメーション可能な属性とプロパティの一覧はアニメーション可能な属性とプロパティを見よ。 For a list of attributes and properties that can be animated using the 'animateTransform' element, see Attributes and properties that can be animated.

16.2.18 アニメーション可能な属性とプロパティ

この仕様の各々の属性／プロパティの定義において、アニメーション要素によるアニメーションが可能かどうかが表記されている。アニメーション可能な属性とプロパティでは次のように表記される： Each attribute or property within this specification indicates whether or not it can be animated by animation elements. Animatable attributes and properties are designated as follows:

アニメーション：可 Animatable: yes.

一方、アニメーション可能でない属性とプロパティでは次のように表記される： whereas attributes and properties that cannot be animated are designated:

アニメーション：不可 Animatable: no.

SVG には、サポートされる様々な属性とプロパティのための基本データ型のセットが定義されている。これらのアニメーション可能な属性とプロパティに対し、どのアニメーション要素がそれぞれの基本データ型のアニメーションに利用できるかを、次の表にまとめる。 SVG has a defined set of basic data types for its various supported attributes and properties. For those attributes and properties that can be animated, the table below indicates which animation elements can be used to animate each of the basic data types.

与えられた属性やプロパティの算出値とアニメーションで指定された値がすべて数値に変換できる場合、加算アニメーションは可能になる。しかしながら、アニメーションまたは基底値【アニメーション適用前の属性やプロパティの元の値】に数値に変換できないキーワード値が１つ以上用いられている場合、加算アニメーションは不可能になる。 If the computed value of a given attribute or property and the values specified in an animation can all be converted to numeric values, then additive animations are possible; however, if the animation or base value uses one or more keyword values which cannot be converted to a numeric value, additive animation is not possible.

下の例では、 fill プロパティは下層値 currentColor を持ち、 red から #DDF へアニメーションされる。 color プロパティの値は yellow である。 In the example below, the 'fill' property has an underlying value of currentColor and is animated from red to #DDF. The value of the 'color' property is yellow.

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

fill プロパティの算出値 yellow は RGB 色、すなわち数値の３つ組 (255, 255, 0) に変換でき、同様にキーワード red も RGB 色、すなわち数値の３つ組 (255, 0, 0) に、値 #DDF も (221, 221, 255) に変換できるのでアニメーションは加算可能になれる。これらのキーワード値が none や url(#foo) など、数値表現に変換できない場合、アニメーションは加算可能になれない。 The animation can be additive, because the computed value of the 'fill' property is yellow, which can be converted to an RGB color which is a triple of numeric values (255, 255, 0); the keyword red can likewise be converted to an RGB color which is a triple of numeric values (255, 0, 0), as can the value #DDF which corresponds to (221, 221, 255). Had any of these values been keywords which could not be converted to a numeric representation, such as none or url(#foo), then the animation could not have been additive.

データ型	加算可能？	animate	set	animate Color	animate Transform	注記
<color>	可	可	可	可	不可	各値が RGB 色に変換可能なときに限り加算可能。
<coordinate>	可	可	可	不可	不可
<integer>	可	可	可	不可	不可
<length>	可	可	可	不可	不可
<list-of-`T`s>	不可	可	可	不可	不可
<number>	可	可	可	不可	不可
<paint>	可	可	可	可	不可	各値が RGB 色に変換可能なときに限り加算可能。
<transform>	可	不可	不可	不可	可	加算可能の意味は、変換が下層値を表現する変換のベースセットに対する後置積をとること。
<IRI>	不可	可	可	不可	不可
アニメーション可能な属性とプロパティに利用される他のすべてのデータ型	不可	可	可	不可	不可

表に挙げた加算可能なアニメーションに関与できる型は同様に累積的アニメーションにも関与できる。 Any type listed in the table as being able to participate in an additive animation can also participate in a cumulative animation.

上の表にあてはまらないもの、あるいは特定の属性やプロパティに対するアニメーションに関する特記事項は、その属性やプロパティが定義されている仕様の節に含まれる。 Any deviation from the above table or other special note about the animation capabilities of a particular attribute or property is included in the section of the specification where the given attribute or property is defined.

加算可能なアニメーション要素が属性やプロパティの値に対するアニメーションを行っている最中に同じ属性やプロパティの値に変更が加えられた場合、アニメーションにおいては新しい値に動的に調整されなければならない。【調整 - adjust - の意味内容が曖昧】 If an attribute or property value is modified while an additive animation element is animating the same attribute or property, the animation must adjust dynamically to the new value.

16.3 SVG DOM を利用したアニメーション

Example dom_animate DOM を利用した単純なアニメーションを示す。 Example dom_animate shows a simple animation using the DOM.

Example: dom_animate.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.2" baseProfile="tiny"
     width="4cm" height="2cm" viewBox="0 0 400 200">

  <!-- uDOM と uDOM の Timer インターフェースを利用する簡単なアニメーション。 -->
  <desc>A simple animation using the uDOM and the Timer interface of the uDOM.</desc>

  <script type="application/ecmascript"><![CDATA[
    var timeValue = 0;
    var timerIncrement = 50;
    var maxTime = 5000;
    var textElement;
    var svgRoot;
    var mytimer;

    // タイマーのリスナ
    // A listener for the timer
    function someListener(evt) {
      showAndGrowElement();
    }

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

      launchTimer();
    }

    function launchTimer() {
      // initialInterval = 0 ：可能な限り早くタイマーイベントを発火させる
      // repeatInterval = 50 ：タイマーイベントは毎 50 ms ごとに送られなければならない
      // Fire timer event as soon as possible, initialInterval = 0
      // Timer event must be sent every 50 ms, repeatInterval = 50
      someTimer = createTimer(0, 50);

      // "SVGTimer" イベントのリスナを追加
      // Add a listener for the "SVGTimer" event
      someTimer.addEventListener("SVGTimer", someListener, false);

      // タイマー開始。initialInterval は 0 なので直後に最初のイベントが発火される
      // Start the timer, which will fire the first event immediately as initialInterval is 0
      someTimer.start();
    }

    function showAndGrowElement() {
      timeValue += timerIncrement;

      // 文字列を 20 倍になるまで徐々に拡大
      // Scale the text string gradually until it is 20 times larger
      scalefactor = (timeValue * 20) / maxTime;
      var matrix = svgRoot.createSVGMatrixComponents(scalefactor, 0, 0, scalefactor, 0, 0);
      textElement.setMatrixTrait("transform", matrix);

      // 文字列を徐々に不透明にする
      // Make the string more opaque
      var opacityFactor = timeValue / maxTime;
      textElement.setFloatTrait("fill-opacity", opacityFactor);

      if (timeValue >= maxTime) {
        someTimer.stop();
      }
    }
  ]]></script>

  <handler type="application/ecmascript" ev:event="load">
    init();
  </handler>

  <rect x="1" y="1" width="398" height="198" fill="none" stroke="blue" stroke-width="2"/>
  <g transform="translate(50,150)" font-size="7" stroke="none">
    <text fill="red" fill-opacity="0" xml:id="svgtext">SVG</text>
  </g>
</svg>

0 秒

2.5 秒後

5 秒後

上の SVG ファイルは、テキスト文字列 "SVG" を表す text 要素一つを含んでいる。アニメーションは 5 秒ごとに反復される。テキストは小さく透明な状態から次第に大きく不透明な状態へと変化する。この例の動作の仕組を説明する： The above SVG file contains a 'text' element that says "SVG". The animation loops for 5 seconds. The text string starts out small and transparent and grows to be large and opaque. Here is an explanation of how this example works:

例の中では load イベントを対象にする handler が１つだけ宣言されている： A unique 'handler' is declared in the example to handle the load event:
```
      <handler type="application/ecmascript" ev:event="load">
          init();
      </handler>
```
文書が一旦完全に読み込まれて処理されると、この handler が ECMAScript 関数 init() を呼び出す。 Once the document has been fully loaded and processed, this 'handler' invokes the ECMAScript function init().
script 要素はアニメーションを動かす ECMAScript を定義する。一度だけ呼び出される init() 関数は、グローバル変数 textElement と svgRoot に値を与え、 launchTimer() 関数を呼び出して SVGTimer オブジェクトを作成し、タイマーをセットする。 showAndGrowElement() は呼び出される度に text 要素の transform 属性と fill-opacity プロパティに新しい値を設定する。 The 'script' element defines the ECMAScript which drives the animation. The init() function is only called once to give a value to global variables textElement and svgRoot and to create and launch an SVGTimer object via the launchTimer() function. showAndGrowElement() sets the 'transform' attribute and 'fill-opacity property on the 'text' element to new values each time it is called.
someListener 関数は EventListener オブジェクトとして利用される。 launchTimer() 関数の中で、 someListener は SVGTimer イベントが配送される度に呼び出されるように、タイマーオブジェクトの addEventListener() メソッドにパラメタとして渡される（ someTimer オブジェクトがこのイベントの唯一の標的）。このようにして、スクリプトを用いてタイマーオブジェクトにリスナを登録できる。 The someListener function is used as an EventListener object. In the launchTimer() function, someListener is passed as a parameter to the addEventListener() method of the timer object so that it is called each time an SVGTimer event is dispatched. (The someTimer object is the only target of this event). This way, it is possible to register a listener on a timer object using scripting.
SVGTimer イベントは定期的に配送されるので、 showAndGrowElement() は 50 ミリ秒ごとに呼び出され、テキストの属性を変化させる結果、テキストのアニメーションが行われる。 showAndGrowElement() は、各呼び出しごとにアニメーションの最長持続時間に到達したかどうかをチェックし、もしそうならタイマーオブジェクトの stop() メソッドを呼び出してアニメーションを止める。 Because an SVGTimer event is dispatched regularly, showAndGrowElement() is called every 50 milliseconds and changes the text attributes thereby animating the text. showAndGrowElement() checks each time it is invoked whether the maximum duration of the animation has been reached and, if so, calls the stop() method on the timer object to stop the animation.

16.4 アニメーションと包含ボックス

アニメーションの効果によりアニメーション対象の要素の包含ボックスも変化する。これについての詳細は座標系, 変換, 単位の章の包含ボックスの定義を見よ。 The effects of animation may change the bounding box of animated elements. For details on this, see the definition of the bounding box in the Coordinate Systems, Transformations and Units chapter.

16 アニメーション

目次

16.1 概要

16.2 アニメーション要素

16.2.1 概観

16.2.2 SMIL 2.1 アニメーションとの関係

16.2.3 アニメーション要素の例

16.2.4 アニメーションの対象となる要素を特定する属性

16.2.5 アニメーションの対象となる属性またはプロパティを特定する属性

16.2.6 アニメーションと名前空間

16.2.7 定速アニメーションと複合型

16.2.8 アニメーションのタイミングを制御する属性

event-base 要素

計時値

16.2.9 時経過に伴うアニメーション値を定義する属性

16.2.10 アニメーションが加算可能かどうかを制御する属性

16.2.11 継承

16.2.12 animate 要素

16.2.13 set 要素

16.2.14 animateMotion 要素

16.2.15 mpath 要素

16.2.16 animateColor 要素

16.2.17 animateTransform 要素

16.2.18 アニメーション可能な属性とプロパティ

16.3 SVG DOM を利用したアニメーション

16.4 アニメーションと包含ボックス