こんにちは、yukipanです。
サイト制作で地図やイラスト上でピンポイントにリンクを付けるとき、<map>タグと<area>タグでクリッカブルマップ〜という手法があったそうな。
だけどレスポンシブ対応が難しかったり、いろいろめんどくさかったみたい。（ヒトゴトっぽいのはやったことないから。）
めんどくさいな〜って思ってたら、あら便利なものが。
SVGを使えばかんたんにリンクが付けれちゃう！
早速方法をメモします。
地図のSVGを用意
兎にも角にもSVGの地図データがないと始まりません。
参考サイトに載っていた「素材Library.com」さんから地図データをダウンロード。
「あれ？aiがない。」
大丈夫です。epsでいけます。epsをIllustratorで開きます。
レイヤー名がIDの名前になるんだけど、広島県全体がレイヤーで各地区はパスになっていた。
パスをレイヤーにする方法知ってたら誰か教えて〜
とりあえず今回は新規レイヤーをせっせと作って地区分けした。
レイヤー名付けたあとで思った。
「なんでレイヤー名（IDになる）日本語にしたんだろう・・・」
ホントは英数字がいいよね〜。
でも今回はめんどくさいからそのまま日本語で。
SVGをエディタで開いてコピペ
SVGをエディタで開くとめっちゃ呪文・・コードが表示される。
表示されたコードを全部コピーしてサイトのHTMLにコピペする。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<style>
.cls-1, .cls-4, .cls-5 {
fill: none;
stroke-width: 2px;
}
.cls-1 {
stroke: #231815;
stroke-linecap: square;
stroke-linejoin: round;
}
.cls-2, .cls-5 {
font-size: 10px;
}
.cls-2, .cls-3, .cls-4, .cls-5 {
font-family: Meiryo-Bold, Meiryo;
font-weight: 700;
}
.cls-3, .cls-4 {
font-size: 12px;
}
.cls-4, .cls-5 {
stroke: #fff;
}
</style>
</defs>
<g id="江田島市">
<path class="cls-1" d="M283,514.67s3.33-1,4.33-4-3.66-8.34-3.66-8.34l1.33-4-4.33-3L281,489s4.33-3,5.33-5.33,4.34-15,4.26-17-.59-9.34-.59-9.34,1.33-7.33,0-9.33-6.33-9.67-6.33-9.67L281.33,443s-13-1-14.66-1.33-1.67,2.66-1.67,2.66l3.67,7s-3.34,5.34-4.34,6-1,4-1,4,6.34-.66,7.34-2.33,3.66-2.33,3.66-2.33,9.34,11,9.34,14-2.67,8.66-2.67,8.66h-4.67l-3-9s-2.33,4.34-4,3.67S257,456.67,257,456.67H240.67l-3.34-3-2,3.33,4.34,2.67,4,6.33L241,470.67l2,3.66A23.93,23.93,0,0,0,254,484c7.67,3.33,3.33,3.33,3.33,3.33l1,6,5.63,3v-7.66l9.37,5-4,4.33v8.67H266l-4.67,4,2.63-1,3.37.66-3.37,9Z"/>
<path class="cls-1" d="M248.67,501.67s-6.34-4-7.34-4.67v13s2.67.71,3.67-.29,6.67,1,8.33,0,0-8,0-8Z"/>
</g>
・・・ 続く ・・・
</svg>各地区にリンクを付ける
<g>タグを「<a xlink:href=”#”>」で囲って、#をリンクさせるURLにする。
ついでに地図が「fill: none;」で白なので、色を付けた。
リンクを付けるときのポイントは、hrefじゃなくて、xlink:hrefにすること。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<style>
.cls-1, .cls-4, .cls-5 {
fill: #ccc;
stroke-width: 2px;
}
.cls-1 {
stroke: #231815;
stroke-linecap: square;
stroke-linejoin: round;
}
.cls-2, .cls-5 {
font-size: 10px;
}
.cls-2, .cls-3, .cls-4, .cls-5 {
font-family: Meiryo-Bold, Meiryo;
font-weight: 700;
}
.cls-3, .cls-4 {
font-size: 12px;
}
.cls-4, .cls-5 {
stroke: #fff;
}
</style>
</defs>
<a xlink:href="#" target="_blank">
<g id="江田島市">
<path class="cls-1" d="M283,514.67s3.33-1,4.33-4-3.66-8.34-3.66-8.34l1.33-4-4.33-3L281,489s4.33-3,5.33-5.33,4.34-15,4.26-17-.59-9.34-.59-9.34,1.33-7.33,0-9.33-6.33-9.67-6.33-9.67L281.33,443s-13-1-14.66-1.33-1.67,2.66-1.67,2.66l3.67,7s-3.34,5.34-4.34,6-1,4-1,4,6.34-.66,7.34-2.33,3.66-2.33,3.66-2.33,9.34,11,9.34,14-2.67,8.66-2.67,8.66h-4.67l-3-9s-2.33,4.34-4,3.67S257,456.67,257,456.67H240.67l-3.34-3-2,3.33,4.34,2.67,4,6.33L241,470.67l2,3.66A23.93,23.93,0,0,0,254,484c7.67,3.33,3.33,3.33,3.33,3.33l1,6,5.63,3v-7.66l9.37,5-4,4.33v8.67H266l-4.67,4,2.63-1,3.37.66-3.37,9Z"/>
<path class="cls-1" d="M248.67,501.67s-6.34-4-7.34-4.67v13s2.67.71,3.67-.29,6.67,1,8.33,0,0-8,0-8Z"/>
</g>
</a>
・・・ 続く ・・・
</svg>cssでhoverとか調整
hoverしたときに色を変える記述したり。
ポイントは「path」に装飾すること。
svg {
width: 100%;
height: auto;
}
svg a path{
transition: fill 0.3s linear;
}
a:hover path{
fill: #00BFB8;
}手順を覚えてしまえばかんたん！SVGステキ！
今回は地区名のテキストは何もしなかったけど、ちゃんとレイヤー分けしたら良さそう〜
脱クリッカブルマップ！hoverやレスポンシブにも対応できるクリッカブルなSVG
こちらのサイトを参考にさせていただきました。ありがとうございます。
Illustratorからの書き出しのコツとか詳細に書かれています。参考にどうぞ〜
