クリックすると色が変わるSVG
2022年2月25日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は、クリックすると色が変わるSVGを作ってみます。
難しい言い方をすると「SVGの色を動的に書き換える」です(違うかも)
SVGをいじってみよう
「ケミストオンラインコミュニティ」のロゴマーク(非公式)を使ってみます。
このSVGは3つの部品(2つのパスと1つのサークル)で構成されています。それぞれにc1、c2、oというクラス名を付けます。
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path class="c1" d="M339.8,392.8c5.2,5.2,5.2,13.7,0,18.9L290,461.5c-66,66-173.5,66-239.5,0c-66-66-66-173.5,0-239.5l49.8-49.8c5.2-5.2,13.7-5.2,18.9,0l44.1,44.1c5.2,5.2,5.2,13.7,0,18.9L113.5,285c-31.3,31.3-31.3,82.2,0,113.4c31.3,31.3,82.2,31.3,113.4,0l49.8-49.8c5.2-5.2,13.7-5.2,18.9,0L339.8,392.8z" />
<path class="c2" d="M216.3,163.3c5.2,5.2,13.7,5.2,18.9,0l49.8-49.8c31.3-31.3,82.2-31.3,113.4,0c31.3,31.3,31.3,82.2,0,113.4l-49.8,49.8c-5.2,5.2-5.2,13.7,0,18.9l44.1,44.1c5.2,5.2,13.7,5.2,18.9,0l49.8-49.8c66-66,66-173.5,0-239.5c-66-66-173.5-66-239.5,0l-49.8,49.8c-5.2,5.2-5.2,13.7,0,18.9L216.3,163.3L216.3,163.3z" />
<circle class="o" cx="256" cy="256" r="74.7" />
</svg>
初期状態の色(#eee)を設定します。
.c1,
.c2,
.o {
fill: #eee;
cursor: pointer;
transition: all .5s ease;
}
クリックした時の色を設定します。
.c1-clicked {
fill: #32bdeb;
transition: all .5s ease;
}
.c2-clicked {
fill: #f08300;
transition: all .5s ease;
}
.o-clicked {
fill: #31a8a6;
transition: all .5s ease;
}
スクリプトで、クラスの付け外しの設定をします。
let path1 = document.getElementsByClassName('c1')
for (let i = 0; i < path1.length; i++) {
path1[i].addEventListener('click', toggleClass)
}
function toggleClass() {
this.classList.toggle('c1-clicked')
}
let path2 = document.getElementsByClassName('c2')
for (let i = 0; i < path2.length; i++) {
path2[i].addEventListener('click', toggleClass)
}
function toggleClass() {
this.classList.toggle('c2-clicked')
}
let path3 = document.getElementsByClassName('o')
for (let i = 0; i < path3.length; i++) {
path3[i].addEventListener('click', toggleClass)
}
function toggleClass() {
this.classList.toggle('o-clicked')
}
strokeとstroke-widthで縁取りをすると塗り絵っぽくなりますね。
日本地図を作ってみよう

突然ですが、うちの息子(3歳)は現在「くもんの日本地図パズル」にハマっています。あっ やべっ 対象年齢5歳以上ってなってる

よく「沖縄県」「香川県」「東京都」などの細かいピースがどっかいっちゃいます。
何とかしましょう、SVGで!
まずは日本地図(白地図)のSVGを入手します。
参考:Geolonia blog|JSとCSSでカスタマイズできてモバイルでも使いやすいSVGの日本地図データを公開しました!
ありがたく使わせていただきます。
都道府県ごとにパスが分かれていてクラス名も付けてくれているので、後は地方ごとの色とクラスの付け外しを設定すれば完成です!
クリックしたら色が付くってだけなので、パズルと呼ぶには程遠いですが。
まとめ

/つぎはせかいちずのぱずるがほしい\
世界地図は大変そうだなぁ(196か国?)