animateMotion

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

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

この属性は [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

メモ: <animateMotion> においては、 calcMode 属性の既定値は paced です。

アニメーション属性

グローバル属性

使用上の注意

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

仕様書

Specification
SVG Animations Level 2
# AnimateMotionElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animateMotion
calcMode
fill
href
keyPoints
origin
path
rotate
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報