animateMotion

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

<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>

keyPoints

この属性は [0,1] の範囲で、それぞれの keyTimes に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。
値の型: <number>*; Default value: none; Animatable: no

path

この属性は、 d 属性と同じ構文を使用して、モーションパスを定義します。
値の型: <string>; Default value: none; Animatable: no

rotate

この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。
値の型: <number>|auto|auto-reverse; Default value: 0; Animatable: no

アニメーションタイミング属性

begin, dur, end, min, max, restart, repeatCount, repeatDur, fill

アニメーション値属性

calcMode, values, keyTimes, keySplines, from, to, by

他のアニメーション属性

特に重要なもの: attributeName, additive, accumulate

アニメーションイベント属性

特に重要なもの: onbegin, onend, onrepeat

コア属性

特に重要なもの: id

スタイル付け属性

class, style

イベント属性

グローバルイベント属性, 文書要素イベント属性

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

• <mpath>