animateMotion

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

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

<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 です。

アニメーション属性

アニメーションタイミング属性
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
イベント属性
グローバルイベント属性, 文書要素イベント属性

使用上の注意

This element implements the SVGAnimateMotionElement interface.

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
animateMotionChrome 完全対応 ありEdge 完全対応 ≤79Firefox 完全対応 ありIE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
calcModeChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
keyPointsChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
originChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
pathChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rotateChrome ? Edge ? Firefox ? IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報