クリックすると色が変わるSVG

Web

2022年2月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、クリックすると色が変わるSVGを作ってみます。

難しい言い方をすると「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で縁取りをすると塗り絵っぽくなりますね。