|
また、textタグの文字列も同様に、この方法で回転が可能です。
== 動画 ==
SVGの動画を実行または閲覧するには、webブラウザで実行・閲覧を行ってください。Firefox, Google Chrome, Microsoft Edge はSVG動画にも対応しています。
一方、Inkscapeでは動画は無効化され、静止画しか表示されません。
=== 基本 ===
次のコードは、水色の背景の上に、四角を水平方向に移動させます。
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>
まず、移動させたい対象物に対応する開始タグと終了タグの間に、<code><animate></code>タグを入れます。
上記の場合、四角形を移動させたいので、<code><rect></code>タグおよび<code></rect></code>の間に、<code><animate></code>タグを入れることになります。
また、前提として動画SVG図形の場合、開始タグと終了タグを両方とも用意しないといけません。（一方、動画でない静止画を書くだけなら、タグは終了タグ1個でなければならない。）
自分でコードを書いた際、もし静止してしまって動かない場合には、よくあるミスですが、開始タグのつもりが末尾に<code>/</code>などがついて終了タグになっていないか、点検してください。（静止SVG図形用のコードをコピーしたときに、よくやるミスです。）
動画のスピードは入力せず、入力するのは初期値と最終値および、1回の描画あたりの時間（単位は秒数）を入力すると、SVGが代わりに適切なスピードを選択して、動画の描画を実行します。
回転の方向の正負（プラスマイナス）は、時計回り（右回り）が正・プラスです。
;attributeName
:どの属性を変動させるかの指定。
;from
:attributeNameで指定した属性の初期値。単位はpx(ピクセル)。単位を明治したい場合には「px」をつける。
;to
:attributeNameで指定した属性の最終値。単位はpx。(fromと同様)
;dur
:1回の描画あたりの秒数。単位をつけないと、単位が秒になる。秒であることを明示したい場合には「s」をつける。
;repeatCount
:繰り返しの回数。無限に繰り返したい場合には値を "indefinite" に指定する。
なお、durを3秒以下にすると、人間の目では、見るのが疲れます。なので閲覧者の安全のため4秒以上にすると良いでしょう。
SVGでいう回転は、数学でいう線形変換の回転行列に近いですが( [[高等学校数学C/行列]] )、しかし方向が数学とは違い、SVGでは時計回り（右回り）がプラスの方向になっている事に気をつけてください。
=== 斜め移動 ===
前の節の方法では、上下方向または水平方向にしか、移動できないです。
斜めに移動するには、<code>animateTransform</code>タグ および 属性 <code>attributeName="transform"</code> および<code>type="translate"</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">
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
dur="5s" repeatCount="indefinite"
values="0,0; 100,50; 200,0"
/>
</rect>
</svg>
</syntaxhighlight>
;解説
<code>animateTransform</code> は平行移動の他にも回転も扱います。<code>type</code>属性によって、平行移動か回転かの区別をします。
図形の移動の軌跡の指定方法は、<code>value</code>属性による相対座標で表します。上記コードの場合の
values="0,0; 100,50; 200,0"
は、rectタグの座標を起点とした相対座標です。
上記コードの場合、
:相対座標(0, 0) → 相対座標(100, 50) → 相対座標(200, 0)
というふうに3点の間をこの順番で移動していきます。
起点の絶対座標が(10,40)ですので、絶対座標に換算すると、
:絶対座標(10, 40) → 絶対座標(110, 90) → 絶対座標(210, 40)
というふうに3点の間をこの順番で移動していきます。
このように<code>value</code>属性で指定する点は3点以上でも構いません。
他の属性については、ブラウザによっては
attributeType="XML"
を省略できます。
しかし、
type="translate"
は移動の種類を決定するので、絶対に必要です。（実際、ここを削ると、ブラウザでは動画として動作しなくなります。）
attributeName="transform"
も、今のところ、どのブラウザでも絶対に必要です。（おそらく実装の都合もあるのでしょう。）
=== 回転の動画 ===
<!-- 静止画の単元にも「回転」の単元があるので、区別のため、こちらではタイトルに「動画」を入れています。 -->
SVG動画で回転をさせたい場合<code>animateTransform</code>タグ および 属性 <code>attributeName="transform"</code>を使うことに加えて、
: <code> type="rotate" </code>
を指定します。type属性は transalateではなくrotate です。"translate" とは数学の用語で「平行移動」という意味ですので、もし回転させたい場合には translate は不適切です。
"Transform"(変形、変身)と "translate"(平行移動、並進) は意味が違うので、混同しないように注意してください。
SVGでは行列計算によって、図形を縦長にしたり横長にしたりなどの変形を行えますが、回転も行列計算で行っているためか、SVGでは回転は"Transform"(変形、変身)に分類されます。
;仕様
<code> from </code> 属性で、開始時の角度と座標位置を指定します。
: <code> from="0 60,90" </code> なら、「角度0度から開始で、座標位置は<code>(x=60,y=90)</code>の位置」という指定です。
rotateの場合のfromの書式は <code> from="角度 x座標,y座標" </code> です。
同様に、 <code> to </code> 属性で、終了時の角度と座標位置を指定します。
rotateの場合のtoの書式は <code> to="角度 x座標,y座標" </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">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60,90" to="180 60,90"
dur="5s" repeatCount="indefinite"
>
</rect>
</svg>
</syntaxhighlight>
;解説
from や to のx座標とy座標は省略できますが、その場合、原点 (0,0) が回転の中心になります。
from や to を使わずにvalue で回転の方法を指定する事もできますが、回転の場合にfromとtoを使わないと集団作業でのメンテナンスがしづらくなる可能性があるので、なるべく from や to で記述しましょう。
SVGでいう回転は、数学でいう線形変換の回転行列に近いですが( [[高等学校数学C/行列]] )、しかし方向が数学とは違い、SVGでは時計回り（右回り）がプラスの方向になっている事に気をつけてください。
SVGのrotateは回転行列の一種なので、回転の際には一般に、自転とともに公転をしてしまいます。
もし、「公転だけをさせたい」という場合には、<code>anmateMotion</code>を使うことで、パスにそった平行移動が可能なので、それを流用して公転を命令できます。
== 構造化 ==
| 