--- title: animateMotion slug: Web/SVG/Element/animateMotion tags: - Element - SVG - SVG Animation translation_of: Web/SVG/Element/animateMotion ---
{{SVGRef}}

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

注: 既存のパスを再利用するには、 <animateMotion> 要素内の {{SVGElement("mpath")}} 要素を {{SVGAttr("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>

{{EmbedLiveSample('Exemple', 150, '100%')}}

使用場面

{{svginfo}}

属性

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

注: <animateMotion> においては、 {{SVGAttr("calcMode")}} 属性の既定値は paced です。

アニメーション属性

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

グローバル属性

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

使用上の注意

この要素は {{domxref("SVGAnimateMotionElement")}} インターフェイスを実装しています。

仕様書

仕様書 状態 備考
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}} {{Spec2("SVG Animations 2")}} 変更なし
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}} {{Spec2('SVG1.1')}} 初回定義

ブラウザーの互換性

{{Compat("svg.elements.animateMotion")}}

関連情報