今日はSVGデータを使用してアニメーションさせてみましょう。
SVGデータとは何かといいますと、端的に言うとXML形式で書かれた画像です。
SVGの基本
例えばこのSVGデータをテキストで開くとこんなかんじ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"> ]> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="130px" height="130px" viewBox="-10 -10 130 130" enable-background="new -10 -10 130 130" xml:space="preserve"> <defs> </defs> <polygon fill="#F0F0DB" points="58,109 0,90 0,20 58,39 "/> <polygon fill="#C2F0B0" points="58,109 108,89 108,19 58,39 "/> <polygon fill="#D4F0DB" points="58,39 0,20 50,0 108,19 "/> </svg> |
イメージマップのように頂点の座標が数値で記述されています。
テキストで描画情報を持った画像ってところでしょうか。ベクトルデータなので拡大縮小してもボケることはありません。
pointsの部分、頂点の座標をちょっと増やしてやると、簡単に移動させることができます。
|
1 |
<polygon fill="#C2F0B0" points="58,109 108,89 108,19 58,39 "/> |
↓ この部分のX座標を20ずつ追加してみると側面のパーツがキュっとずれます。
|
1 |
<polygon fill="#C2F0B0" points="78,109 128,89 128,19 78,39 "/> |
色も数値をいじるだけで簡単に変更できます。
|
1 |
<polygon fill="#C2F0B0" points="58,109 108,89 108,19 58,39 "/> |
↓ 側面パーツのfillをオレンジ色に
|
1 |
<polygon fill="#F79124" points="58,109 108,89 108,19 58,39 "/> |
SVGデータ自体は、Illustratorでパスを描いてSVGで書き出し、テキストエディタで開けば複雑な図形でも頂点や曲線のXMLコードが簡単に取得できます。（プラグインを使用すればFireworksで書き出すこともできます。）
その他対応ブラウザやfilterなどの機能については沢山記事があるので今回は省きます。気になる方はググってください。
SVGにjQueryで処理を追加する
さて、今回はこの数値で記述されたSVGデータにjQueryで簡単に処理を付けてみましょう。
処理を付与させるには、コードにidをふります。（今回はsvgタグ内と、polygonタグにそれぞれidをふりました。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"> ]> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="130px" height="130px" viewBox="-10 -10 130 130" enable-background="new -10 -10 130 130" xml:space="preserve" id="test_svg" > <defs> </defs> <polygon fill="#F0F0DB" points="58,109 0,90 0,20 58,39 " id="parts01" /> <polygon fill="#C2F0B0" points="58,109 108,89 108,19 58,39 " id="parts02" /> <polygon fill="#D4F0DB" points="58,39 0,20 50,0 108,19 " id="parts03" /> </svg> |
そしていつも通り、headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は svg_sample.js とします）を読み込みます。
|
1 2 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="svg_sample.js" charset="utf-8"></script> |
jsを書き込む
読みこんだjsファイル、 svg_sample.js に処理を書いていきます。▽クリックで色を変える
#test_svg をクリックした時に #parts01 が赤色に。
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#test_svg').click(function(){ //クリックした時の処理 $('#parts01').attr('fill','#FF0000'); }); }); |
▽クリックした時にfadeoutする
#test_svg をクリックした時に #parts02 を1000ミリ秒でfadeOutする
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#test_svg').click(function(){ //クリックした時の処理 $('#parts02').fadeOut(1000); }); }); |
▽クリックで時に座標位置を変更する
|
1 2 3 4 5 6 7 8 |
$(function(){ $('#test_svg').click(function(){ //クリックした時の処理 $('#parts03').attr('points','58,24 0,5 50,-15 108,4'); }); }); |
