WEB NOTE
WEB関連の備忘録

マップで検索を作るときはSVGがおすすめ！SVGで作ったマップにリンクを付ける方法

SVG

ウェブサービスを作る際、イラストの都道府県から検索する機能を付けるときどのように実装しますか？
私はSVGを使います。なぜならdivなどの矩形では難しい複雑な形のリンクを簡単に作れるからです。

方法

方法はとてもシンプルです。
SVGをインラインに記述し、 a タグをつけるだけです。

地図のSVGデータを用意する

まずは、地図のSVGデータを用意します。
今回はイラストACから素材を使わせていただきます。

SVGコードをHTMLに移す

SVGをHTMLに移したら、不要な記述を消します。

SVG の path に a タグをつける

リンク範囲の path を a タグで囲います。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999.34 1040.95">
// 略
    <a href="#osaka">
        <path class="cls-1" d="M342.34,665.39l-18.78-14h30.91c26.8-14.87,41.92-38.7,60.37-60.27-6-10.77,10.24-12.88,9.39-23.45-.59-7.21,4.33-14.87,6.72-22.09l15.23-2.84V517.56l-8.2-8.2V496.49l22.63-19.11c1.14-22.24-2.17-42.4-8.63-62.47-2.24-6.94,1.16-15.7,3-23.52-2.28-20.7-23.07-23.41-35.36-34.22-.16-14-.16-14,8.59-24,15.87,16.32,31.64,32.55,47.49,48.87,22.3-5.61,38.46,9.53,57.94,13.81,6,14.2,12.21,28.65,20.09,47.16,1.61,8.81-1.15,20.26-10.65,30.45-3.12,3.34-3.21,9.36-5.19,13.94-6.79,15.74-13.8,31.37-21,47.59,7.67,13.12,7.39,29.58,12.68,44.61,5.49,15.61-3.28,31.5-9.42,46-15.31,2.88-31.35,3.39-45.19,9.18-15.2,6.35-32.13,2.75-46.39,11.06-16.3-3.49-29.35,8-44.77,9.72C368.87,657.23,354.24,662.45,342.34,665.39Z" />
    </a>
</svg>

複数の path をにリンクを付けたい場合は g タグで囲い、そこに a タグを囲えば問題ないです。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999.34 1040.95">
    <a href="#hyogo">
        <path class="cls-1" d="M243.42,52.52c-2.37,10.72-4.41,19.94-6.31,28.55l36,36,6.73-8.84h21.56l6.11,6.11V152l-8,6.67H268l-5.24,5.24c-2,12.89-3.87,25.23-6,39.09,9.41,6,13.92,20.54,30.61,21.16l14.61,16c16.06,7,25.19-6.75,39.24-7.73,14.79,11.15,6.2,33.25,23,46.88,16,5.54,36.25,12.55,57,9.17l6.58,6.58v24.14c-6.58,4.57-10.35,14.81-22,16.73v22.5l36.79,28-4.28,13.78C449,413,434,434.91,451.28,447.46v24.87l-13.89,11.86-57-11.28c-3.11,3.26-4.83,6.32-7.43,7.57q-18.33,8.85-37.08,16.79c-5.91,2.52-13.23,2.83-18,6.56-9.78,7.59-20.27,8.34-30.68,7.1-3.28-4.65-5.5-11.55-9.23-12.49-22.09-5.57-36.78-23-55.74-33.41-11.5-6.32-21.92-14.61-34.51-23.16-13.74-2.67-28.1,4.2-43.18,6.95-12.58,2.29-25.76,2.45-38.59,1.78-8.31-.43-14.41-9.12-20-23.61-14.09,4.47-11.11,22.17-23.58,29.24l-13.62-9.65-15.45-.69L0,401.31l14.92-13.5V346.88L5.33,335.72c15.32-27.13,39.63-45,60.34-68V241.37C76.1,225.45,93.88,231.09,107,221.44a11.57,11.57,0,0,0,1.07-2.1c10.65-25.68,9.75-35.86-2.17-61-7-14.8-12-30.54-18.24-45.74-3.77-9.26-8.22-18.23-12-27.48C72.07,76.57,69,67.78,65.88,59.4L92.11,46.76C139.07,41.08,191.18,36.94,243.42,52.52Z" />
        <path class="cls-1" d="M155.26,656.66,273,539l14.86,1.73c-11.43,14.65-20.95,26.83-31.44,40.25V588l-18.61,18.61,11.68,52.25,6.53,2.3v16c-21.12,5.83-37.37,24.5-61.76,24.75l-10.89,9.36c-2.31-.94-4.28-1.09-4.85-2.06-6.19-10.62-6.25-22.49-5.12-34.57l-18.1,4.66Z" />
    </a>
// 略
</svg>

ホバーアクションを付ける

ユーザーが選択しているかわかりやすいようにホバーアクションを付けます。
つけ方は、いつも通りCSSで、 :hover を付けるだけです。
※IE11では、SVG 特有のfillなどにCSSアニメーションを付けることができないので注意

デモ

PICK UP