animateMotion

SVG の <animateMotion> 要素は、ある要素がモーションパスに沿って移動する方法を定義します。

Note: 既存のパスを再利用するには、 <animateMotion> 要素内の <mpath> 要素を path (en-US) 属性の代わりに使用する必要があります。

html,body,svg { height:100%; margin: 0; padding: 0; display:block; }

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion dur="10s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

使用場面

カテゴリー	アニメーション要素
許可されている内容	任意の数、任意の順序の以下の要素。説明的要素 `<mpath>`

属性

keyPoints (en-US): この属性は [0,1] の範囲で、それぞれの keyTimes (en-US) に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。 値の型: <number>*; Default value: none; Animatable: no
path (en-US): この属性は、 d 属性と同じ構文を使用して、モーションパスを定義します。 値の型: <string>; Default value: none; Animatable: no
rotate (en-US): この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。 値の型: <number>|auto|auto-reverse; Default value: 0; Animatable: no

Note: <animateMotion> においては、 calcMode (en-US) 属性の既定値は paced です。

アニメーション属性

アニメーションタイミング属性: begin (en-US), dur (en-US), end, min (en-US), max (en-US), restart (en-US), repeatCount (en-US), repeatDur (en-US), fill
アニメーション値属性: calcMode (en-US), values (en-US), keyTimes (en-US), keySplines (en-US), from (en-US), to (en-US), by (en-US)
他のアニメーション属性: 特に重要なもの: attributeName (en-US), additive (en-US), accumulate (en-US)
アニメーションイベント属性: 特に重要なもの: onbegin, onend, onrepeat

グローバル属性

コア属性: 特に重要なもの: id
スタイル付け属性: class (en-US), style (en-US)
イベント属性: グローバルイベント属性, 文書要素イベント属性

使用上の注意

この要素は SVGAnimateMotionElement (en-US) インターフェイスを実装しています。

仕様書

仕様書	状態	備考
SVG Animations Level 2 <animateMotion> の定義	編集者草案	変更なし
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <animateMotion> の定義	勧告	初回定義

ブラウザーの互換性

BCD tables only load in the browser