SVG画像：画像の一部をクリック可能にする

画像の一部をクリックやホバー出来るようにする、クリッカブルマップの作り方です。
svg編とpng編の２パターン試してみました。今回はsvg編です。

完成イメージ

svg画像をクリッカブルにしていきます。
下の完成イメージはホバー対応ですが、クリックもほとんど同じです。
レスポンシブにも対応しています。

以下の手順で進めていきます。

今回はillustrarionsからダウンロードした画像を使用していきます。
画像をvs codeなど適当なエディタで開き、ソースコードをHTMLに貼り付けます。

HTMLが煩雑になってしまうのがどうしても嫌な人は、imgタグで読み込んだあとに下のプラグインを導入してあげてください。imgタグで読み込んだsvg画像をソースコード形式に展開してくれます。

ただし、IEとは相性が悪く表示が崩れる場合があります。IE対応が必要な場合は非推奨です。

<img src="./img/sample.svg" class="replace-svg">

window.addEventListener('load', function(){
    // svgにつけたクラス名を指定
    deSVG('.replace-svg', true);
});

一度ブラウザで開き表示を確認します。
開発者ツールを開きクリック可能にしたい範囲を探していきます。
見つけたらその範囲のidをメモしておきます。

先ほど見つけたidに対して好きなスタイルを当てて完了です。かんたん…
背景色を変更したい場合はbackground-colorではなくfillで指定します。

#XMLID_26_:hover{
  cursor: pointer;
  fill: #0CF9C3;
  transition-property: fill;
  transition-duration: .9s;
}

クリックイベントを発生させたい場合は
同じようにjsでidを指定してonclickなどを設定してあげてください。