<animateMotion>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

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

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

例

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

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>*; 既定値: none; アニメーション: 不可
path: この属性は、 d 属性と同じ構文を使用して、モーションパスを定義します。 値の型: <string>; 既定値: none; アニメーション: 不可
rotate: この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。 値の型: <number> | auto | auto-reverse; 既定値: 0; アニメーション: 不可