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アニメ(アニメーション)作成 | 画像加工編集サイト・フリーソフト:無料写真加工ならバナー工房
以上。