SVG/動画

動画

SVGの動画を実行または閲覧するには、webブラウザで実行・閲覧を行ってください。Firefox, Google Chrome, Microsoft Edge はSVG動画にも対応しています。

一方、Inkscapeでは動画は無効化され、静止画しか表示されません。

基本

次のコードは、水色の背景の上に、四角を水平方向に移動させます。

<svg x="0" y="0" width="400" height="200" style="background-color: #bbbbff" >
    <rect x="10" y="40" width="50" height="50" fill="white" stroke="black"  stroke-width="3">
        <animate attributeName="x" from="10" to="300" dur="5s" repeatCount="indefinite" >
    </rect>
</svg>

まず、移動させたい対象物に対応する開始タグと終了タグの間に、<animate>タグを入れます。

上記の場合、四角形を移動させたいので、<rect>タグおよび</rect>の間に、<animate>タグを入れることになります。

また、前提として動画SVG図形の場合、開始タグと終了タグを両方とも用意しないといけません。（一方、動画でない静止画を書くだけなら、タグは終了タグ1個でなければならない。）

自分でコードを書いた際、もし静止してしまって動かない場合には、よくあるミスですが、開始タグのつもりが末尾に/などがついて終了タグになっていないか、点検してください。（静止SVG図形用のコードをコピーしたときに、よくやるミスです。）

動画のスピードは入力せず、入力するのは初期値と最終値および、1回の描画あたりの時間（単位は秒数）を入力すると、SVGが代わりに適切なスピードを選択して、動画の描画を実行します。

回転の方向の正負（プラスマイナス）は、時計回り（右回り）が正・プラスです。

attributeName

どの属性を変動させるかの指定。

from

attributeNameで指定した属性の初期値。単位はpx(ピクセル)。単位を明治したい場合には「px」をつける。

to

attributeNameで指定した属性の最終値。単位はpx。(fromと同様)

dur

1回の描画あたりの秒数。単位をつけないと、単位が秒になる。秒であることを明示したい場合には「s」をつける。

repeatCount

繰り返しの回数。無限に繰り返したい場合には値を "indefinite" に指定する。

なお、durを3秒以下にすると、人間の目では、見るのが疲れます。なので閲覧者の安全のため4秒以上にすると良いでしょう。

SVGでいう回転は、数学でいう線形変換の回転行列に近いですが( 高等学校数学C/行列 )、しかし方向が数学とは違い、SVGでは時計回り（右回り）がプラスの方向になっている事に気をつけてください。

斜め移動

前の節の方法では、上下方向または水平方向にしか、移動できないです。

斜めに移動するには、animateTransformタグ および 属性 attributeName="transform" およびtype="translate"を使います。

<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">
        <animateTransform 
        attributeName="transform"
        attributeType="XML"
        type="translate"
               
        dur="5s" repeatCount="indefinite" 
        
        values="0,0; 100,50; 200,0"
        />
    </rect>
</svg>

解説

animateTransform は平行移動の他にも回転も扱います。type属性によって、平行移動か回転かの区別をします。

図形の移動の軌跡の指定方法は、value属性による相対座標で表します。上記コードの場合の

values="0,0; 100,50; 200,0"

は、rectタグの座標を起点とした相対座標です。

上記コードの場合、

相対座標(0, 0) → 相対座標(100, 50) → 相対座標(200, 0)

というふうに3点の間をこの順番で移動していきます。

起点の絶対座標が(10,40)ですので、絶対座標に換算すると、

絶対座標(10, 40) → 絶対座標(110, 90) → 絶対座標(210, 40)

というふうに3点の間をこの順番で移動していきます。

このようにvalue属性で指定する点は3点以上でも構いません。

他の属性については、ブラウザによっては

attributeType="XML"

を省略できます。

しかし、

 type="translate"

は移動の種類を決定するので、絶対に必要です。（実際、ここを削ると、ブラウザでは動画として動作しなくなります。）

attributeName="transform"

も、今のところ、どのブラウザでも絶対に必要です。（おそらく実装の都合もあるのでしょう。）

回転の動画

SVG動画で回転をさせたい場合animateTransformタグ および 属性 attributeName="transform"を使うことに加えて、

type="rotate"

を指定します。type属性は transalateではなくrotate です。"translate" とは数学の用語で「平行移動」という意味ですので、もし回転させたい場合には translate は不適切です。

"Transform"(変形、変身)と "translate"(平行移動、並進) は意味が違うので、混同しないように注意してください。

SVGでは行列計算によって、図形を縦長にしたり横長にしたりなどの変形を行えますが、回転も行列計算で行っているためか、SVGでは回転は"Transform"(変形、変身)に分類されます。

仕様

from 属性で、開始時の角度と座標位置を指定します。

from="0 60,90" なら、「角度0度から開始で、座標位置は(x=60,y=90)の位置」という指定です。

rotateの場合のfromの書式は from="角度 x座標,y座標" です。

同様に、 to 属性で、終了時の角度と座標位置を指定します。

rotateの場合のtoの書式は to="角度 x座標,y座標" です。

コード例

<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">
        <animateTransform 
         attributeName="transform"
        attributeType="XML"
        type="rotate"
        
        from="0 60,90" to="180 60,90"
        
        dur="5s" repeatCount="indefinite" 
        
        >
    </rect>
</svg>

解説

from や to のx座標とy座標は省略できますが、その場合、原点 (0,0) が回転の中心になります。

from や to を使わずにvalue で回転の方法を指定する事もできますが、回転の場合にfromとtoを使わないと集団作業でのメンテナンスがしづらくなる可能性があるので、なるべく from や to で記述しましょう。

SVGでいう回転は、数学でいう線形変換の回転行列に近いですが( 高等学校数学C/行列 )、しかし方向が数学とは違い、SVGでは時計回り（右回り）がプラスの方向になっている事に気をつけてください。

SVGのrotateは回転行列の一種なので、回転の際には一般に、自転とともに公転をしてしまいます。

もし、「公転だけをさせたい」という場合には、anmateMotionを使うことで、パスにそった平行移動が可能なので、それを流用して公転を命令できます。

自転しない公転の動画

たとえば次のようなコードで、公転だけをさせることができます。

<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>

path属性で、下記の「M」(m)や「A」(a)のようなパスコマンドで、移動のコマンドを入力できます。

ペンの移動コマンドMおよびm

コマンド「M」および「m」は始点のセットです。「M」とはペンの移動 Move の M だと思われます。大文字「M」だと絶対座標で始点の位置を指定します。小文字「m」だと相対座標で始点の位置を指定します。

M x座標,y座標

の書式です。

相対座標の場合の基準は、前の命令の終わった時点が基準です。

以下、別のコマンドでも位置を扱うコマンドなら同様に、大文字なら絶対座標での位置指定であり、小文字なら相対座標で位置指定をしています。

円弧コマンドMおよびm

コマンド「A」および「a」は、楕円にそった移動の命令です。「A」とは円弧 Arc の A だと思われます。

正円（小学校で習うような普通の円）の専用のアニメーション命令は用意されていないので、楕円のa命令を正円でも流用します。（後述の半径xと半径yを同じ値にすれば、正円として流用できます。）

大文字「A」だと絶対座標です。小文字「m」だと相対座標です。

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つの弧の組み合わせとしてコードを記述するのがラクでしょう。