2014年4月29日火曜日

IE11はSVGの宣言型アニメーションをサポートしないらしい。どうする?

SVGで簡単なアニメーションをさせる場合、いきなりJavaScriptに手を出す人は少ないだろう。普通はこんな感じでanimateタグなどのSVGの宣言型アニメーションから始めるだろう。



少なくとも最新版のChrome、Firefox、Safari、Operaではこれで問題無い。しかし、IE11では動かない。SVG自体の表示はできるが、アニメーションが動かない。まさか。。。

SVG アニメーション基礎編 (Windows)

スクリプト ベースのアニメーションを活用すれば、シンプルなアニメーションだけでなく、複雑なアニメーションの作成も可能になります。この理由、および CSS アニメーションなどのその他の理由から、Internet Explorer では宣言型アニメーションはサポートされていません。

だそうだ。。。いやいやいや。SVGに対応しているというからには動いてもらわないと困るんだけどなぁ(^^);

泣き言を言っていても仕方ない。こうなったら道は2つしかない。JSでやるか?CSSでやるか?ここではできるだけ従来の方法と似せるためにCSSを使うことにした。



CSSのanimationを使った。似たようなプロパティーをムダに入力しなければならないので美しくないなぁ。

まずベンダープレフィックスを何とかしないと。そして、CSS自体をlessなどのようにプログラマブルにすべきだね。

最後にもうひとつ気が付いたこと。

SVGをimgタグで読み込むとIE11以外ではアニメーションが動かなかった。objectタグで読み込むと全てのブラウザでアニメーションが動いた。

<object type="image/svg+xml" data="img/loader.svg"></object>

というわけで、やっぱり特に理由がない限りSVGはobjectタグで読み込んだほうが良いみたい。