今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年（！）の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。
animate要素の追加
例えば、以下のようなanimate要素を追加したい場合。
＜animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze” /＞
動的に追加すると以下のようになります。
function fade (target) {
// animation要素の生成
var animation = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘animate’);
// 属性の追加
animation.setAttributeNS(null, ‘attributeName’, ‘fill-opacity’);
animation.setAttributeNS(null, ‘begin’, ‘indefinite’);
animation.setAttributeNS(null, ‘to’, 0);
animation.setAttributeNS(null, ‘dur’, 0.25);
animation.setAttributeNS(null, ‘fill’, ‘freeze’);
// Animation要素をSVGに追加
target.appendChild(animation);
// アニメーション開始
animation.beginElement();
}
アニメーション開始のタイミング
ここで注意しなければならないのがbegin属性の値です。begin属性を省略すると、アニメーションを開始するオフセット時間（何秒からアニメーションが始まるか）が0秒であることを意味します。０秒とは、文書が読み込まれたタイミングを意味します。このbegin属性に”indefinite”を指定すると、SMIL DOMからメソッドを使用できることを意味し、beginElement()を呼ぶことでJavaScriptからアニメーションを開始させることができます。
しかし、beginElementしてもSVG要素の状態によってはアニメーションが動かないことがあります。SVGのアニメーションはページのloadイベントで開始されるらしく、読み込みの段階でrootにくっついていない場合、後からSVGを追加してもアニメーションしませんでした。そこで、displayプロパティで非表示にし、対応しました。
今のところ、IEではSMILアニメーションの実装予定は無いようです（CSS3の機能と重複があるため）ので、クロスブラウザ対応を見据える場合は、CSSアニメーションもしくはJSでの属性変更が無難かもしれません。