SVG SMIL ループアニメーションを作る方法

SVG SMIL ループアニメーションを作る方法

SMILの <animation コマンドに繰り返し設定（repeatCount="indefinite"）をつけて無限ループすることは可能だが、
これでは、１つの図形の繰り返ししかできない。

ほんとにやりたいのは、１シーンの繰り返しだ。
図形の重なり順位が変化したり、新しい図形が出現、消滅する。
これを実現するには、個別に <animateをつけるしかない。

各図形には、登場と退場の命令をつけることになる。

繰り返しを行うならば、その登場と退場を、シーン全体の時間からの相対時間で
制御することになる。

ここで、ブラウザのSVGビュアの実装が問題になる。図形が多くなると
全ての図形を時間どおりに制御することができなくなる。
Firefox 以外のブラウザでは、どうも、時間が間に合わないときに、
命令の読み飛ばしが行われるようだ。

このとき、登場、退場の命令が読み飛ばされると、「図形が表示されない」、または、
「図形が残る」という症状になる。これが同じ時間の図形がすべて「表示されない」ので
あれば、１コマが表示されないことになり、見た目は悪くない。

しかし、一部の図形だけが表示されないのであれば、崩れた表示になる。

また、退場の命令が読み飛ばされると図形が残ることになる。
通常、時間がたつと、どんどん上書きされるように処理が進むため、残った
図形は問題にならない。しかし、ループ制御によって、早い時間の図形から
もう一度表示する場合、前回に表示され、退場するはずだった図形が
残っていると、その図形が一番上に表示されてしまい、見苦しいものとなる。

これを防ぐためには、全体のループの時間を、本来の時間より、0.5秒ほど
長くし、最後に表示した図形が退場する時間の余裕をとっておくことである。

また、最初にすばやく描画できる背景をいれておき、画面が真っ白になるのを防ぐ