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
注: <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
- イベント属性
- グローバルイベント属性, 文書要素イベント属性
使用上の注意
この要素は SVGAnimateMotionElement
インターフェイスを実装しています。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
SVG Animations Level 2 <animateMotion> の定義 |
編集者草案 | 変更なし |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <animateMotion> の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。