|
もし、「公転だけをさせたい」という場合には、<code>anmateMotion</code>を使うことで、パスにそった平行移動が可能なので、それを流用して公転を命令できます。
== 自転しない公転の動画 ==
たとえば次のようなコードで、公転だけをさせることができます。
<syntaxhighlight lang="xml">
<svg x="0" y="0" width="400" height="200" style="background-color: #bbbbff" >
<rect x="10px" y="40px" width="50" height="50" fill="white" stroke="black" stroke-width="3">
<animateMotion
path="M 100,0
a 50,50 90 0 0 100,100
a 50,50 90 0 0 -100,-100 "
dur="4s" repeatCount="indefinite"
>
</rect>
</svg>
</syntaxhighlight>
path属性で、下記の「M」(m)や「A」(a)のようなパスコマンドで、移動のコマンドを入力できます。
Mは始点のセットです。
M x座標,y座標
の書式です。
「a」は、楕円にそった移動の命令です。正円（小学校で習うような普通の円）の専用のアニメーション命令は用意されていないので、楕円のa命令を正円でも流用します。（後述の半径xと半径yを同じ値にすれば、正円として流用できます。）
aの書式は、
a 半径x,半径y 角度 large-arc-sweep-flag 回転向きフラグ 終点x座標,終点y座標
です。
回転向きフラグは、0なら反時計周りです。1なら時計周りです。
large-arc-sweep-flag とは、楕円の円弧は始点と終点の2点を定めても一通りには定まらず、長弧と短弧の2通りの弧があるので、そのうちどちらかを指定するためのものだという仕様です。仕様上では、large-arc-sweep-flag が0なら短弧で、1なら長弧という仕様です。
ですが、実際のブラウザ実装では、なぜか短い弧しか選択されない場合があるので、とりあえず180度以上の弧に沿って動かす場合には、180度以下の2つの弧の組み合わせとしてコードを記述するのがラクでしょう。
各種の座標の位置は、相対位置であり、前の命令の終わった時点からの相対位置です。
| 