SVG内のシェイプに、JavaScriptで順番に色をつけていく

今回の記事は、「JavaScriptだけでSVGに色をつける方法」についての記事です。

（※前回の記事では、「外部JSONを用意して、そのJSON内の要素の数だけ、SVGに色をつける方法」について記事を書きました）

次の動画のように、
世界地図のSVGがあって、そこに、JavaScriptで次々に色を塗っていく、ということをしていきます。
※このサンプルは前回と同様に、例として野生のカピバラの生息地に色をつけているサンプルになります。

前回の記事でも書きましたが、

扱う地図の種類をよりクローズアップした地図に変えてみたりして、
工夫次第では、いろいろなビジュアル表現に役立つ手法だと思います。

これも前回書いたことですが、たとえば「もっと地域をクローズアップした地図のSVG」を用意。その地域の色を塗ってあげるなどすると、
旅行サイトの案件や、観光地を紹介する案件などでも利用ができそうですね。

SVGに順番に色をつけるしくみ（JSONなし、JavaScriptのみバージョン）

↑さて冒頭の動画ですが、

前回の記事では、
・色をつけたい場所を定義した、外部JSONファイルを用意
・そのJSONをJavaScriptで読み込み、JSONの値の数だけ順番にclass名をつけていく

と言った仕組みで動かしていました。
今回は、それをJSONを使わずに「JavaScript内に同じ意味の配列を持たせてあげる形」の記事になります。

（※そもそもなぜ前回の記事で「外部JSONを用意したか」といえば、
実際の制作現場や、実際のWebサイト運用時において
「更新担当の方が、JavaScriptやhtmlをよく理解しているとは限らない」というケースが多々あるためです。
その様なケースでも、「このJSONのここのテキストだけ更新してください」と言った運用ができることを想定して、前回の記事を書いたわけです）

そして今回も、いきなり冒頭の動画の様な
「複雑な形の地図SVG + そこにJavaScriptで着色」だとわかりづらいと思いますので、

前回と同様に、次のセクションから
「15個の単純な正方形が並んでいるSVG」に、「順番に色をつけていくサンプル」を例に、
順を追って書いていきたいと思います。

単純な正方形が並ぶSVGに、順番に色をつける方法（JSONなし、JavaScriptのみバージョン）

さて、実際のコードです。
冒頭の世界地図SVGだと、いきなり複雑すぎてわかりづらいと思いますので、
次の動画の様に「15個の単純な正方形が並んでいるSVG」に、「順番に色をつけていくサンプル」です。

今回は外部JSONなしバージョンですので、

・JavaScript
・html
・svg
・css

これらの構成で、上の動画の様にSVGに順番に色をつけていく方法を書いていきます。

SVGに順番に色をつけるJavaScript（JSONなし、JavaScriptのみバージョン）

それではJavaScriptのコードのサンプルです。

変更点は、前回の記事における
外部JSONを、JavaScriptの内部に配列として持ってきている部分です。

そして外部JSONを読む必要がないため、実行する関数もひとつになっています。

// 色をつけたい場所を指定する配列
const fifteenSquare = [
"shape1",
"shape2",
"shape3",
"shape4",
"shape5",
"shape6",
"shape7",
"shape8",
"shape9",
"shape10",
"shape11",
"shape12",
"shape13",
"shape14",
"shape15"
];

// ループするたびにディレイをかける変数。初期値は必須
let delayNumber = 0;

// JSON内の配列に対してループを記述する
const liveColoringOrder = () => {
  fifteenSquare.forEach((t) => {
    const attachmentShape = document.querySelector(`.${t}`);

    setTimeout(() => {
      attachmentShape.classList.add("is-active");
    }, delayNumber);

    delayNumber += 100;
  });
};

// ページが読み込まれたら実行
window.addEventListener("load", () => {
  liveColoringOrder();
});

↑前回の記事の「外部JSONを読み込む場合」と比べて、
かなりシンプルになったかと思います。
（※個々の行で何をしているかはコメントアウトの通りですが、詳細は前回の記事を参照してください）

実際のWebサイト運用時に、他のスタッフの方に
「このJSONの、ここのテキストだけを更新してください」と言った運用をしないのであれば、

こちらのアプローチの方が、シンプルではあるかとおもいます。

htmlの用意

htmlとしては、次の構成があれば最低限良いです。
前回と同じですが、利便性の観点でこの記事にも掲載しておきます。

前回同様、重要なのは、「ここにSVGをコードとして埋め込みます」と記載のコメントアウト部分に、
この後のセクションでご紹介するSVGをコードとして配置する、という点だけです。

<section>
  <div class="shape-container">
    <div class="shape-svg-parent">
      <!--ここにSVGをコードとして埋め込みます-->
    </div>
  </div>
</section>

SVGのコード

SVGのコードはとても長いので、この記事では割愛します。
同じコードが前回の記事にありますので、そちらをそのまま参照してください。

cssのサンプル

こちらも前回の記事と同じものですが、
利便性の観点でこちらの記事にも掲載しておきます。

cssは、次の様な感じで再現が可能です。

ポイントとしては、JavaScriptで付与する is-active というclassです。
これが順番に「0.数秒おき」に付与されることにより、
SVGに順番に色がついていく様に見えます。

自然な着色のアニメーションをさせるため、フェードイン効果として
transition: fill 0.1s, opacity 1s;
を与えています。

.shape-container {
  margin: 2rem auto;
  width: fit-content;
}
.shape-svg-parent {
  width: 1366px;
}

/* ここからSVG内のスタイル */
.cls-1 {
  fill: #fff;
}
/* SVG内の図形のデフォルトスタイル */
.default-fill {
  fill: #fff;
  opacity: 0;
  transition: fill 0.1s, opacity 1s;
}
/* この is-active がJSにより付与されると着色される */
.default-fill.is-active {
  fill: rgb(65, 175, 190);
  opacity: 1;
}

地図SVGへの応用をするには

ここまでのセクションの記述で、
「15個の単純な正方形が並んでいるSVG」に、「順番に色をつけていくサンプル」
ができたことになります。

さて、本題としてはこの仕組みを使って、冒頭の動画にある様な
「地図のSVGに順番に色をつける」と言う話です。

これに関しては、完全に「15個の単純な正方形が並んでいるSVG」に、「順番に色をつけていくサンプル」と同じ仕組みで実現が可能になります。

必要なのは次のとおりです。

1. 色をつけたい地図SVGをコードとして用意する（Illustrator等でSVG変換するのがスムーズかと思います）
2. 色をつけたい地図SVGのコード内に、正方形の場合と同様に、あらかじめclassを付けておく
3. この記事のサンプルで書いた様なJavaScriptを用意する
4. 正方形の場合と同様に、色をつけたい 2. のclass名と対応している配列を用意する
5. JavaScriptを実行すると色が順番につけることができる

という形で、地図SVGにも順番に色をつけていく表現が可能になります。

なぜ前回の記事では外部JSONを用意したのか

冒頭にも少し書きましたが、

実際のWebサイト運営フェーズでは、
「更新に携わる方がJavaScriptやhtmlをよく理解しているとは限らない」というケースが結構あります。

その様なケースでは、前回の記事でご紹介した
「外部JSONを用意」「それをJavaScriptで読み込んでSVGを操作する」といった方法をとれば

更新担当のスタッフの方に
「この data.json というファイルの、この部分のテキストだけを更新してください」と言う形での運用ができるわけですね。

・外部ライターの方が更新を兼務されるケース
・取引先の方が、値だけを簡易的に更新されたいケース

などなど、実際の制作現場では様々なWebサイト運営のケースがあります。

今回のJavaScriptだけのシンプルな例と合わせて、

ぜひ前回の記事も読むことで、対応できる案件の幅が広がることかと思います。

この記事のまとめ

今回は、冒頭の動画でご紹介した様な、
「SVGに順番に色をつける方法」について

前回の記事とはことなる方法として
「外部JSONを使わず」「JavaScriptのみ」で行う方法について記事を書きました。

扱うSVG地図の種類を
たとえば「もっと地域をクローズアップした地図のSVG」にするなどして、その地域の色を塗ってあげるなど。

工夫のしかた次第では、いろいろなビジュアル表現に役立つ手法だと思います。
旅行サイトの案件や、観光地を紹介する案件などでも利用ができそうです。

また今回の記事では、「なぜ前回、わざわざ外部JSONを用意したのか？」という理由についても
記事内で書きました。

その部分に記載した通り、実際のWebサイト運営フェーズでは、
「更新に携わる方がJavaScriptやhtmlをよく理解しているとは限らない」というケースが結構あります。
その様なケースでは、前回の記事でご紹介した
「外部JSONを用意」「それをJavaScriptで読み込んでSVGを操作する」といった方法が役立つことと思います。

今回の記事を、前回の記事と共に通して読むと、上記の様なケースで役に立つかもしれません。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。