animateMotion
SVG の <animateMotion>
要素は、ある要素がモーションパスに沿って移動する方法を定義します。
メモ: 既存のパスを再利用するには、 <animateMotion>
要素内の <mpath>
要素を path (en-US)
属性の代わりに使用する必要があります。
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>
使用場面
属性
keyPoints (en-US)
-
この属性は [0,1] の範囲で、それぞれの
keyTimes (en-US)
に関連付けられた値に対して、パスに沿ってオブジェクトがどのくらいの距離にあるかを示します。 値の型: <number>*; Default value: none; Animatable: no path (en-US)
-
この属性は、
d
属性と同じ構文を使用して、モーションパスを定義します。 値の型: <string>; Default value: none; Animatable: no rotate (en-US)
-
この属性は、パスに沿ってアニメーションされた要素に適用される回転を定義します。 値の型: <number>|
auto
|auto-reverse
; Default value:0
; Animatable: no
メモ: <animateMotion>
においては、 calcMode (en-US)
属性の既定値は paced
です。
アニメーション属性
- アニメーションタイミング属性
begin (en-US)
,dur (en-US)
,end
,min (en-US)
,max (en-US)
,restart (en-US)
,repeatCount (en-US)
,repeatDur (en-US)
,fill
- アニメーション値属性
calcMode (en-US)
,values (en-US)
,keyTimes (en-US)
,keySplines (en-US)
,from (en-US)
,to (en-US)
,by (en-US)
- 他のアニメーション属性
-
特に重要なもの:
attributeName (en-US)
,additive (en-US)
,accumulate (en-US)
- アニメーションイベント属性
グローバル属性
- コア属性
-
特に重要なもの:
id
- スタイル付け属性
class (en-US)
,style (en-US)
- イベント属性
使用上の注意
この要素は SVGAnimateMotionElement
(en-US) インターフェイスを実装しています。
仕様書
Specification |
---|
SVG Animations Level 2 # AnimateMotionElement |
ブラウザーの互換性
BCD tables only load in the browser