![http://2ndidea.com/svg/svg-path-drawing-animation-even-ie/](https://cdn-ak-scissors.b.st-hatena.com/image/square/09f33d7c7c36415a071749e345991f72fedba9b7/height=288;version=1;width=512/http%3A%2F%2F2ndidea.com%2Fassets%2Fimg%2Fposts%2Fsvganimation1.png)
文字を書き順通りに徐々にアニメーションさせて描画する「ハンドライティングアニメーション」をSVGで実装する方法。 以前に AfterEffects で同じようなことをやっていて、それのSVGバージョン。AfterEffects の場合は、当然ながら動画として出力しvideo要素で動画を埋め込んで表示させるわけだけど、SVGの場合は、(主に)インラインSVGを設置してJavaScriptでアニメーションさせて実現する。 少し前までは、一部のブラウザでうまく表示できなかった(気がした)が、今は全く問題なく表示させることができるようになっていた。古いIE(10以前)ではさすがに無理だけど、もう考慮する必要はないと思われるので、十分に使える表現だと思う。 SVGの作成が意外に面倒だったので作成時のポイントとか、HTMLへ設置する方法、JS実装ではまった点等を覚書として書いておく。 ハンドライティン
bonfire frontendで発表した今後のフロントエンドの話です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く