2016年5月9日月曜日

JavaScript(JQuery)でSVGの色を変更する

JacaScriptを使用し、動的にSVGの色を変更するテストページを作成した。
地理的メモ帳: JSテストページ

SVG上では都道府県ごとにIDをつけてある。
例えば北海道であれば、「HOKKAIDO」という具合。
このIDを使ってそれぞれを認識し、色を塗り分けている。
 

手順としては、下記の通り。
1.都道府県のIDを配列に用意する。
2.ボタンをクリックしたら、各IDの塗りつぶしをランダムで設定する。

これだけである。
だが、これができれば今後はページを切り替えることなく、色を塗り分けることができるのだ。
確実な前進だ。

SVGの塗りつぶしをJavaScript(JQuery)でやる方法はこちら。
jquery - SVG - Change fill color on button click - Stack Overflow

ランダムな色コードの生成はこちら。
'#'+Math.floor(Math.random()*16777215).toString(16);

GIF画像の作成はこちら。
GIFアニメ(アニメーション)作成 | 画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房

以上。