cssでSVGを使ったアニメーション
SVGとは？
SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGはXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。
SVGに対応しているブラウザー
svgで使用するタグの分類
- 四角形：rect
- 正形：circle
- 楕円：ellipse
- 直線：line
- 折れ線：polyline
- 多角形：polygon
- パス：path
- テキスト：text
svgで使用するタグは大きく分けると３種類に分ける事が出来ます。
- 基本図形(rect, circle, ellipse, line, polyline, polygon)
- パス(path)
- テキスト(text)
HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEとOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。
変化させる方法は主に以下の3つがあります。
CSSプロパティ（transitionやanimation）を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います（ちなみにjQueryはSVGの要素を扱えないので使えません）。
SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。
stroke：線の色
stroke-width：線の太さ
fill：塗りつぶしの色
stroke-dasharray：破線の間隔
stroke-dashoffset：破線の開始位置
今回は破線のプロパティである、stroke-dasharrayとstroke-dashoffsetを使い、線を引くアニメーションを作成します。
また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none（初期値）
キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。
forwards
アニメーションの実行後にキーフレームの最後の指定が適用されます。
backwards
アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。
both
forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。
