SVG+JavaScriptで色ぬり遊び(SVG Advent Calendar 2014 16日目)

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

やりたかったこと

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

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

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

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

できあがったもの

See the Pen ミクさんの色替え遊び by Mei Koutsuki (@mei331) on CodePen.

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

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

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

SVGを作る時に気をつけたこと

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

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

svg_advent2

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

改善したい部分

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

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

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

UPDATE : 2017/11/12 / Tags

関連記事

新着記事

2 Responses

コメントを残す