SVG＋JavaScriptで色ぬり遊び（SVG Advent Calendar 2014 16日目）

SVGが色々と触ってみると楽しいので、遊んでおります。
SVG Advent Calendar 2014 がネタ切れで困っているというお話なので、ひっそりと参加してみます。

Contents

やりたかったこと

SVGのパスの塗色をCSSで変更できるなら、ブラウザ上で色コードを指定して色を塗り替える遊びができるんじゃないかな？と思いまして。

そこで、以下のようなものを作ってみようと考えました。

・線画と色のパスにそれぞれ名前を付けたSVGを表示
・パス名に対応したフォームを表示
・フォーム内の値を変えるとパスの色が変わる

ざっくりこんな感じです。

なにかイラスト描かなきゃな、となって思いついたのがミクさんでした。
動作確認をChromeでしかしてないです。すみません。

inputの値を取得し、inputのid名からパス名を指定して値を変える、というシンプルな仕組みです。
値は16進数6桁のみtrueになります。

inputのid名とSVG側のパス名に規則性（今回は接頭語）をつけておけば指定も楽ですね。JS側の記述がかなり短くなりました。

こういうのをイラレで作る際、色の塗り分け毎にグループ化しておくと後からの指定が楽でした。

複数のパスも１つのパスもグループ化して、グループ名を指定しておくんです。
そうすると、SVGに書き出した際<g id='グループ名'>〜</g>というタグで囲まれるので、CSSの指定でも#グループ名 path, #グループ名 polygon{}という感じで指定が可能になります。

後からグループ化したいパスを<g id='グループ名'>〜</g>で囲むのもありですが、イラレからSVGを作る際はイラレ上でグループ化しておいた方が間違いがない上に楽です。

線画部分を複合パスにした＋複雑なのもあり、表示がかなり遅いです。
なので、線画部分は透過PNGにし、色ぬり部分をSVGとかにした方がいいのではないだろうか？というのを考えています。
表示速度とか比べてみたいな( ˘ω˘)

以上、SVG Advent Calendar 2014 16日めの記事でした。

もういっこ挑戦してみたいことがあるので、それが出来たらもうひと記事書くかもしれないです。