1.回転と移動

SVG 1.1 ではアニメーションを JavaScript などのスクリプト言語を使わなくても簡単に実装できるようになっている。携帯ブラウザ用の SVG Tiny では、アニメーション機能が削られているが、ACCESS ブラウザと Adobe プラグインの組み合わせから考えると、この手の機能は早いうちに実装されるのではないだろうか。

回転

回転機能をするためには、animateTransform タグを使う。 animateTransform タグは、図形に対して transform を指定したときと同じ効果が得られる。
たとえば、次のサンプルでは、矩形（rect）に対して、回転（transfrom=rotate）を指定して、回転角を 0 から 360 まで一回転させている。繰り返し回数（repeatCount）は 1 回として、 1回転するのに "4s" 、つまり 4秒を指定している。
begin 属性は、アニメーションを開始する条件を指定している。記述方法はいろいろあるのだが、ここでは、自分自身である g タグをクリックしたとき「go.click」に実行されるようになっている。

<g transform="translate(80,80)">
    <g id="go">
        <rect x="-40" y="-40" width="80" height="80" fill="orange" />
        <animateTransform attributeName="transform" type="rotate"
            begin="go.click"
            from="0" to="360" repeatCount="1" dur="4s" />
    </g>
</g>

begin 属性で指定するイベントは、複数の場所に書くことが出来る。
次の例では、矩形をクリックしたときに、同時にPCの絵も動くように修正したものである。

<g transform="translate(160,40)">
    <g id="pc">
        <image xlink:href="computer.svg" width="120" height="120" />
        <animateTransform attributeName="transform" type="rotate"
            begin="go.click" 
            from="0,60,60" to="360,60,60" repeatCount="1" dur="4s" />
    </g>
</g>

イベント発生ではもう少し複雑なことができる。
次の例では、矩形の回転が終わったあとに、PC を回転する例である。矩形のアニメーション（animeteTransform）に id="goanime" を指定し、これが終了した時点で発生するイベント（goanime.end）を捉える。
イベントの発生の仕方が若干ややこしいが、このようにアニメーションの終了イベントを捕まえることができるので、パラパラ漫画風のアニメも実装できるかもしれない。

<g transform="translate(80,80)">
    <g id="go">
        <rect x="-40" y="-40" width="80" height="80" fill="orange" />
        <text x="0" y="0" text-anchor="middle" fill="white" font-size="12">click me</text>
        <animateTransform id="goanime" attributeName="transform" type="rotate"
            begin="go.click"
            from="0" to="360" repeatCount="1" dur="4s" />
    </g>
</g>

<g transform="translate(160,40)">
    <g id="pc">
        <image xlink:href="computer.svg" width="120" height="120" />
        <animateTransform attributeName="transform" type="rotate"
            begin="goanime.end" 
            from="0,60,60" to="360,60,60" repeatCount="1" dur="4s" />
    </g>
</g>

copyleft by marenijr