レスポンシブ対応!地図のリンク付き画像の作成にはSVGが最適。ホバーもCSSから指定できます

先日仕事で地図上の該当箇所をクリックすると、リンク先に飛ぶという案件がありましたので、そちらの方法を備忘録的に残しておこうと思います。

結論から言うと、レスポンシブ対応兼ホバー時に何らかのアクションを付与したい場合は、イラストレーターを使用してSVGでコードを書き出す方法が一番でした。

完成のサンプルページへ

リンク付き地図をSVG画像で作成すると良い理由

実装方法としては、以下の三つがざくっと上げられます。

  1. クリッカブルマップを作成して、配置する方法
  2. CSSのpositionを使用して、個々の画像を配置する方法
  3. SVGでコードとして書き出し、それを該当箇所に貼り付ける方法

1.クリッカブルマップを作成して、配置する方法

こちらの手法は昔からあり、以前バナー画像の中にリンク箇所を数箇所いれる際などはこちらを使用していました。

レスポンシブ対応は、javascriptで対応可能でCDNなどで簡単に実装も可能ですが、ホバー時のアニメーションの実装が難しいです。

というより、自分の場合結局うまくできず諦めました。

javascriptからfocusの際にアウトラインだけに色をつけるなどは出来ましたが、地図の色を変えたり、透過させたりはできず。加えてiphoneなどでクリック範囲・タップ範囲がずれるという報告もあり、クリッカブルマップでの実装は形の複雑な地図の場合はおすすめできません。

2.CSSのpositionを使用して、個々の画像を配置する方法

こちらの手法は決まった幅・高さの画像の中で配置していく分には良いのですが、レスポンシブ対応は難しくずれます。また、配置もシビアで手間なので時間もかかるということで、諦めました。

3.SVGでコードとして書き出し、それを該当箇所に貼り付ける方法

上記の2つの方法を試して、最終的に辿り着いたSVGでの作成は、結果レスポンシブ対応もホバーもスムーズに出来ました。

また、もちろん画像ではないのでRetinaなどでもぼやけることもありませんし、軽量だしということで一石二鳥な感じでおすすめです。

リンク付きの地図をSVGで作成する手順

それでは、ここからは作成手順を紹介したいと思います。

1.Illustratorで地図のSVG画像を作成しよう。

まずはIllusratorを起動して、地図のパスを作成してください。

自分でパスを作成しても良いですが、現実に存在する地図なら、フリー素材サイトなどで探した方が早いので、探してみましょう。

2.地名などを地図の上に表示させている場合は、アウトライン化しよう。

文字を使用している場合は文字を選択+右クリックで、「アウトライン化」しておきましょう。

3.クリック・タップの対象範囲ごとにレイヤーを分割しよう。

地図ができたら、クリック・タップの対象範囲ごとにレイヤーを作成して、Command+Fでアートボードの同位置にコピペしていきましょう。

この際のレイヤー名はコードに書き出したときに、範囲を囲むID名として付与されるので、日本語は避けて小文字の英語のレイヤー名にしておきましょう。

レイヤー名を英語の小文字にしてあるイラストレーターの画像
レイヤー名は小文字の英語にしておきましょう。

4.SVGに書き出しをしよう。

次に「ファイル」→「書き出し」→「スクリーン用書き出し」から、SVGで書き出しましょう。

スクリーン用に書き出しの選択画面が表示されているイラストレーターの画像
スクリーン用に書き出しを選択

5.設定ボタンからSVGの縮小のチェックを外そう。

歯車マークをクリックし、SVGの形式の設定から「縮小」のチェックを外しておきましょう。縮小はコードを軽量化してくれますが、後の作業で地図の一つの範囲ごとにaタグで囲むので、軽量化せずにわかりやすい見た目にしておきましょう。

書き出しのウィンドウの設定ボタンを赤枠で囲んでいる画像
歯車マークをクリック
縮小のチェックを外している画像
縮小のチェックマークを外そう。

あとは、形式をSVGに変更して好きな場所に書き出しましょう。

6.書き出されたSVGをエディタで開いてみよう。

書き出されたSVGファイルを好きなエディタで開いてみましょう。そのまま開くと、イラストレーターで開いてしまうので「右クリック→エディタ」で開きましょう。

今回サンプルで作成した地図のデータを開いてみると下記のようになります。

<style>
.cls-1, .cls-4 {
fill: #d8d8d8;
}

.cls-2 {
fill: none;
stroke-width: 5px;
}

.cls-2, .cls-4 {
stroke: #fff;
}

.cls-3 {
fill: #0585a5;
}

.cls-4 {
stroke-miterlimit: 10;
stroke-width: 3px;
}

</style>
</defs>
<g id="e">
<!--polygonタグが地図の大地部分-->
<polygon class="cls-1" points="1267.97 526.99 1246.8 521.93 1222.46 511.8 1208.7 468.76 1213.99 445.98 1251.04 408.85 1260.56 346.41 1208.7 294.94 1182.24 283.97 1103.92 283.13 1067.94 269.62 1019.25 225.75 1018.2 197.06 1053.12 196.21 1072.17 192.84 1094.4 137.99 1083.82 121.11 1034.07 89.89 893.31 18.17 900.72 52.76 919.77 79.77 898.6 109.3 870.02 138.83 895.43 144.74 896.48 174.27 754.66 175.96 689.04 183.56 665.76 199.59 666.76 221.93 697.51 225.75 734.55 225.75 775.83 243.47 795.94 266.25 806.52 298.31 822.4 315.19 830.87 342.19 834.04 378.48 847.8 386.92 891.19 429.11 925.06 459.48 918.71 483.95 917.88 484.83 938.82 488.17 971.63 513.49 1040.42 530.36 1069 530.36 1093.34 553.15 1172.72 609.68 1195.57 652.54 1228.81 651.03 1234.1 602.93 1280.67 559.9 1283.85 550.62 1267.97 526.99"/>
<!--下記gタグは地図の上に記載していた文字部分-->
<g>
<path class="cls-2" d="M993.32,320.24c-8.08,0-9.78.17-10,3.64-.16,1.94-.08,5.9-.16,10.58,0,1.62.08,1.62,10,1.62,3.71,0,7.59,0,9.05-.08,4.52-.24,4.52,4,4.52,4.28,0,2.34-1.45,4.61-4.28,4.61H1002c-2-.17-5.09-.25-8.16-.25-10,0-10.82.08-10.82,1.78,0,12,.08,13.9.24,15.27.4,3.72,1.7,3.88,13.09,3.88,4.76,0,9.94-.08,11.47-.16h.4a4.1,4.1,0,0,1,4.37,4.12c0,2.18-1.62,4.36-5.09,4.52-1,.08-5.74.16-10.43.16s-9.29-.08-10.34-.16c-7.43-.56-12-3.23-12.36-10.34-.16-3.39-.16-9.37-.16-15.92,0-9.85.08-20.84.24-25.93.16-6.46,4.36-9.86,10.91-10.18,1.45-.08,6.06-.16,10.58-.16s9,.08,10.26.16c3.07.16,4.53,2.18,4.53,4.28a4.45,4.45,0,0,1-4.77,4.36S998.81,320.24,993.32,320.24Z"/>
<path class="cls-3" d="M993.32,320.24c-8.08,0-9.78.17-10,3.64-.16,1.94-.08,5.9-.16,10.58,0,1.62.08,1.62,10,1.62,3.71,0,7.59,0,9.05-.08,4.52-.24,4.52,4,4.52,4.28,0,2.34-1.45,4.61-4.28,4.61H1002c-2-.17-5.09-.25-8.16-.25-10,0-10.82.08-10.82,1.78,0,12,.08,13.9.24,15.27.4,3.72,1.7,3.88,13.09,3.88,4.76,0,9.94-.08,11.47-.16h.4a4.1,4.1,0,0,1,4.37,4.12c0,2.18-1.62,4.36-5.09,4.52-1,.08-5.74.16-10.43.16s-9.29-.08-10.34-.16c-7.43-.56-12-3.23-12.36-10.34-.16-3.39-.16-9.37-.16-15.92,0-9.85.08-20.84.24-25.93.16-6.46,4.36-9.86,10.91-10.18,1.45-.08,6.06-.16,10.58-.16s9,.08,10.26.16c3.07.16,4.53,2.18,4.53,4.28a4.45,4.45,0,0,1-4.77,4.36S998.81,320.24,993.32,320.24Z"/>
</g>
</g>
<g id="d">
<polygon class="cls-4" points="616.02 459.8 636.13 480.05 635.07 501.15 618.13 515.49 622.37 552.62 627.66 559.37 631.89 580.47 656.24 597.34 699.63 598.19 723.97 589.75 723.97 576.25 741.96 572.03 767.36 587.22 805.47 595.66 836.16 598.19 859.44 587.22 894.37 604.09 948.34 603.25 954.69 583.84 943.05 566.97 934.59 551.78 913.42 538.28 906.01 489.33 918.71 475.83 925.06 451.36 891.19 420.99 847.8 378.8 834.04 370.36 830.87 334.07 822.4 307.07 806.52 290.19 795.94 258.13 775.83 235.35 734.55 217.63 697.51 217.63 666.76 213.81 666.82 215.09 643.53 242.1 601.2 277.54 594.85 301.16 569.45 279.22 553.57 275.85 490.7 276.67 491.13 285.98 523.94 312.98 557.81 339.13 583.21 350.95 599.08 378.8 588.5 417.61 576.86 436.17 568.44 440.65 582.15 450.52 616.02 459.8"/>
<g>
<path class="cls-2" d="M708.42,437.15c-6.46,0-17.94-.08-18.75-11.4-.24-4-.4-10.5-.4-17.29,0-8.88.24-18.26.49-22.62.64-11.07,8.64-11.39,18.66-11.39,2.5,0,4.93.08,6.14.16,18.66,1.21,28.92,14.22,28.92,31C743.48,437.07,716.82,437.15,708.42,437.15Zm-1.13-54c-3.88,0-8.24.09-8.49,4.13-.24,3.39-.48,12.68-.48,21.41,0,6.38.16,12.36.48,15.43.41,3.72,2.91,4.36,9.62,4.36,8.48,0,25.53,0,25.53-22.86,0-13-7.84-22.38-20.2-22.38C713.75,383.26,710.28,383.17,707.29,383.17Z"/>
<path class="cls-3" d="M708.42,437.15c-6.46,0-17.94-.08-18.75-11.4-.24-4-.4-10.5-.4-17.29,0-8.88.24-18.26.49-22.62.64-11.07,8.64-11.39,18.66-11.39,2.5,0,4.93.08,6.14.16,18.66,1.21,28.92,14.22,28.92,31C743.48,437.07,716.82,437.15,708.42,437.15Zm-1.13-54c-3.88,0-8.24.09-8.49,4.13-.24,3.39-.48,12.68-.48,21.41,0,6.38.16,12.36.48,15.43.41,3.72,2.91,4.36,9.62,4.36,8.48,0,25.53,0,25.53-22.86,0-13-7.84-22.38-20.2-22.38C713.75,383.26,710.28,383.17,707.29,383.17Z"/>
</g>
</g>
<g id="c">
<polygon class="cls-4" points="312.27 546.71 298.51 570.34 310.15 604.94 341.9 621.81 384.24 587.22 448.8 608.31 468.9 598.19 469.96 574.56 468.9 566.97 473.14 540.81 507.01 573.72 547.22 598.19 563.1 615.06 593.79 619.28 601.2 572.03 612.84 564.43 623.43 553.98 622.37 552.62 618.13 515.49 635.07 501.15 636.13 480.05 616.02 459.8 582.15 450.52 568.44 440.65 560.98 444.61 504.89 436.17 468.9 470.77 445.62 447.99 420.22 452.21 380 479.21 344.02 491.87 330.8 486.6 323.91 512.96 312.27 546.71"/>
<g>
<path class="cls-2" d="M428.91,550.75c-20.12,0-31-15-31-30.7,0-16.4,11.55-32,31.27-32,12.85,0,21.57,7.44,21.57,11.8a5.07,5.07,0,0,1-4.93,5,5.19,5.19,0,0,1-4.12-2.18c-3.15-3.88-8.24-5.74-13.33-5.74-13.65,0-20.92,11.63-20.92,22.54,0,6.79,3.95,22,21,22,6.14,0,12.2-2.35,15.51-6.79a4.73,4.73,0,0,1,4-2.1,5.54,5.54,0,0,1,5.42,5.17C453.39,541.94,443.77,550.75,428.91,550.75Z"/>
<path class="cls-3" d="M428.91,550.75c-20.12,0-31-15-31-30.7,0-16.4,11.55-32,31.27-32,12.85,0,21.57,7.44,21.57,11.8a5.07,5.07,0,0,1-4.93,5,5.19,5.19,0,0,1-4.12-2.18c-3.15-3.88-8.24-5.74-13.33-5.74-13.65,0-20.92,11.63-20.92,22.54,0,6.79,3.95,22,21,22,6.14,0,12.2-2.35,15.51-6.79a4.73,4.73,0,0,1,4-2.1,5.54,5.54,0,0,1,5.42,5.17C453.39,541.94,443.77,550.75,428.91,550.75Z"/>
</g>
</g>
<g id="b">
<polygon class="cls-4" points="323.91 428.58 290.04 443.77 322.85 483.43 344.02 491.87 380 479.21 420.22 452.21 445.62 447.99 468.9 470.77 504.89 436.17 560.98 444.61 576.86 436.17 588.5 417.61 599.08 378.8 583.21 350.95 557.81 339.13 523.94 312.98 491.13 285.98 490.7 276.67 489.01 276.69 464.67 253.91 455.15 228.59 418.1 215.09 386.35 226.06 383.18 233.66 363.07 241.25 313.33 239.56 292.16 234.5 266.76 235.35 283.69 273.32 312.27 294.41 328.14 316.35 350.37 348.42 328.14 366.14 326.62 365.79 333.43 381.33 323.91 428.58"/>
<g>
<path class="cls-2" d="M423.75,392.32c-1.05.09-3.15.17-5.17.17-7.83,0-17.12-.33-17.45-10.43-.16-3.39-.16-9.45-.16-16,0-9.86.08-20.85.24-26,.25-10.1,9.21-10.26,16.08-10.26,1.78,0,3.48.08,4.69.16,13.41.89,18.42,8,18.42,14.79,0,6.14-4,12.12-9.7,12.92-.8.17-1.29.33-1.29.49s.32.24,1.21.32c8.73.65,13.41,7.6,13.41,15.11C444,382.23,437.73,391.52,423.75,392.32Zm11-19.63c0-4.77-3.23-9.45-10.66-10-2-.16-4.12-.24-6.14-.24-7.52,0-8.24.24-8.24,1.86,0,10.1,0,13.81.24,16,.4,3,1.21,4,8.73,4,1.85,0,3.87-.09,5.41-.17A11.3,11.3,0,0,0,434.74,372.69ZM417,338.11c-5.17,0-6.79.65-7,3.72-.16,1.94-.08,6.54-.16,11.23,0,1.69,1.13,1.69,6.46,1.69,1.94,0,4,0,5.5-.08,5.81-.32,9.53-4.84,9.53-9.13,0-3.79-3-7.35-10.1-7.35C421.17,338.19,419.07,338.11,417,338.11Z"/>
<path class="cls-3" d="M423.75,392.32c-1.05.09-3.15.17-5.17.17-7.83,0-17.12-.33-17.45-10.43-.16-3.39-.16-9.45-.16-16,0-9.86.08-20.85.24-26,.25-10.1,9.21-10.26,16.08-10.26,1.78,0,3.48.08,4.69.16,13.41.89,18.42,8,18.42,14.79,0,6.14-4,12.12-9.7,12.92-.8.17-1.29.33-1.29.49s.32.24,1.21.32c8.73.65,13.41,7.6,13.41,15.11C444,382.23,437.73,391.52,423.75,392.32Zm11-19.63c0-4.77-3.23-9.45-10.66-10-2-.16-4.12-.24-6.14-.24-7.52,0-8.24.24-8.24,1.86,0,10.1,0,13.81.24,16,.4,3,1.21,4,8.73,4,1.85,0,3.87-.09,5.41-.17A11.3,11.3,0,0,0,434.74,372.69ZM417,338.11c-5.17,0-6.79.65-7,3.72-.16,1.94-.08,6.54-.16,11.23,0,1.69,1.13,1.69,6.46,1.69,1.94,0,4,0,5.5-.08,5.81-.32,9.53-4.84,9.53-9.13,0-3.79-3-7.35-10.1-7.35C421.17,338.19,419.07,338.11,417,338.11Z"/>
</g>
</g>
<g id="a">
<polygon class="cls-4" points="168.33 687.63 142.93 669.91 150.34 659.79 207.49 676.66 249.82 683.41 279.46 676.66 314.38 676.66 347.19 660.63 345.69 618.72 341.9 621.81 310.15 604.94 298.51 570.34 312.27 546.71 323.91 512.96 330.8 486.6 322.85 483.43 290.04 443.77 323.91 428.58 333.43 381.33 326.62 365.79 279.46 355.17 264.64 334.92 183.15 341.67 153.51 339.13 121.76 356.01 104.83 375.42 100.59 401.58 78.37 402.42 76.25 373.73 52.97 356.86 23.33 369.51 40.27 380.48 41.33 403.26 15.93 416.77 23.33 462.33 36.03 474.15 39.21 485.96 65.67 527.31 62.49 579.62 45.56 596.5 67.78 610.84 74.14 635.32 59.32 652.19 76.25 662.32 96.36 704.51 153.51 717.17 173.6 713.96 172.56 697.76 168.33 687.63"/>
<g>
<path class="cls-2" d="M212.09,545.88a4.75,4.75,0,0,1-4.61-3c-1-2.34-3.07-8.8-5.57-16.32-.16-.48-.4-.72-.89-.72-1.29-.09-4.6-.09-8.24-.09-4.85,0-10.26,0-12,.09a1,1,0,0,0-1,.72c-2,6.39-3.88,12.2-5.09,16.08a4.58,4.58,0,0,1-4.52,3.31c-2.26,0-4.61-1.53-4.61-4,0-1.45.25-2.1,17.94-51.87a7.47,7.47,0,0,1,7.11-5.41,8.05,8.05,0,0,1,7.51,5.57c5.17,14.55,15.68,42.67,18.34,49a6.22,6.22,0,0,1,.49,2.34C217,544.27,214.59,545.88,212.09,545.88ZM198.6,516.55c-2.51-7.59-4.93-14.94-6.22-18.9-.49-1.46-.89-2.26-1.38-2.26s-.89.72-1.45,2.34c-1.21,3.23-6.47,18.34-6.47,19.07,0,.32.17.48.65.48,1.62,0,4.61.08,7.43.08s5.74-.08,6.87-.08c.49,0,.65-.08.65-.32A.93.93,0,0,0,198.6,516.55Z"/>
<path class="cls-3" d="M212.09,545.88a4.75,4.75,0,0,1-4.61-3c-1-2.34-3.07-8.8-5.57-16.32-.16-.48-.4-.72-.89-.72-1.29-.09-4.6-.09-8.24-.09-4.85,0-10.26,0-12,.09a1,1,0,0,0-1,.72c-2,6.39-3.88,12.2-5.09,16.08a4.58,4.58,0,0,1-4.52,3.31c-2.26,0-4.61-1.53-4.61-4,0-1.45.25-2.1,17.94-51.87a7.47,7.47,0,0,1,7.11-5.41,8.05,8.05,0,0,1,7.51,5.57c5.17,14.55,15.68,42.67,18.34,49a6.22,6.22,0,0,1,.49,2.34C217,544.27,214.59,545.88,212.09,545.88ZM198.6,516.55c-2.51-7.59-4.93-14.94-6.22-18.9-.49-1.46-.89-2.26-1.38-2.26s-.89.72-1.45,2.34c-1.21,3.23-6.47,18.34-6.47,19.07,0,.32.17.48.65.48,1.62,0,4.61.08,7.43.08s5.74-.08,6.87-.08c.49,0,.65-.08.65-.32A.93.93,0,0,0,198.6,516.55Z"/>
</g>
</g>
</svg>

<g>から</g>までがIllsutratorの1枚のレイヤーの中身になっており、idにIllustratorでつけたレイヤー名が付与されています。

styleの中に関しては、外部ファイルのCSSに移動しても大丈夫です。移動した際はdefsも必要ないので削除してかまいません。

7.aタグを追記してリンクをつけよう。

Illustratorで地図の区域ごとにレイヤーを作成したので、gタグをaタグで囲みリンク先を付与しましょう。

<a href="リンク先のURL"><!--gタグをaタグで囲む-->
<g id="a">
<polygon class="cls-4" points="168.33 687.63 142.93 669.91 150.34 659.79 207.49 676.66 249.82 683.41 279.46 676.66 314.38 676.66 347.19 660.63 345.69 618.72 341.9 621.81 310.15 604.94 298.51 570.34 312.27 546.71 323.91 512.96 330.8 486.6 322.85 483.43 290.04 443.77 323.91 428.58 333.43 381.33 326.62 365.79 279.46 355.17 264.64 334.92 183.15 341.67 153.51 339.13 121.76 356.01 104.83 375.42 100.59 401.58 78.37 402.42 76.25 373.73 52.97 356.86 23.33 369.51 40.27 380.48 41.33 403.26 15.93 416.77 23.33 462.33 36.03 474.15 39.21 485.96 65.67 527.31 62.49 579.62 45.56 596.5 67.78 610.84 74.14 635.32 59.32 652.19 76.25 662.32 96.36 704.51 153.51 717.17 173.6 713.96 172.56 697.76 168.33 687.63"/>
<g>
<path class="cls-2" d="M212.09,545.88a4.75,4.75,0,0,1-4.61-3c-1-2.34-3.07-8.8-5.57-16.32-.16-.48-.4-.72-.89-.72-1.29-.09-4.6-.09-8.24-.09-4.85,0-10.26,0-12,.09a1,1,0,0,0-1,.72c-2,6.39-3.88,12.2-5.09,16.08a4.58,4.58,0,0,1-4.52,3.31c-2.26,0-4.61-1.53-4.61-4,0-1.45.25-2.1,17.94-51.87a7.47,7.47,0,0,1,7.11-5.41,8.05,8.05,0,0,1,7.51,5.57c5.17,14.55,15.68,42.67,18.34,49a6.22,6.22,0,0,1,.49,2.34C217,544.27,214.59,545.88,212.09,545.88ZM198.6,516.55c-2.51-7.59-4.93-14.94-6.22-18.9-.49-1.46-.89-2.26-1.38-2.26s-.89.72-1.45,2.34c-1.21,3.23-6.47,18.34-6.47,19.07,0,.32.17.48.65.48,1.62,0,4.61.08,7.43.08s5.74-.08,6.87-.08c.49,0,.65-.08.65-.32A.93.93,0,0,0,198.6,516.55Z"/>
<path class="cls-3" d="M212.09,545.88a4.75,4.75,0,0,1-4.61-3c-1-2.34-3.07-8.8-5.57-16.32-.16-.48-.4-.72-.89-.72-1.29-.09-4.6-.09-8.24-.09-4.85,0-10.26,0-12,.09a1,1,0,0,0-1,.72c-2,6.39-3.88,12.2-5.09,16.08a4.58,4.58,0,0,1-4.52,3.31c-2.26,0-4.61-1.53-4.61-4,0-1.45.25-2.1,17.94-51.87a7.47,7.47,0,0,1,7.11-5.41,8.05,8.05,0,0,1,7.51,5.57c5.17,14.55,15.68,42.67,18.34,49a6.22,6.22,0,0,1,.49,2.34C217,544.27,214.59,545.88,212.09,545.88ZM198.6,516.55c-2.51-7.59-4.93-14.94-6.22-18.9-.49-1.46-.89-2.26-1.38-2.26s-.89.72-1.45,2.34c-1.21,3.23-6.47,18.34-6.47,19.07,0,.32.17.48.65.48,1.62,0,4.61.08,7.43.08s5.74-.08,6.87-.08c.49,0,.65-.08.65-.32A.93.93,0,0,0,198.6,516.55Z"/>
</g>
</g>
</a>

この作業を地図の区域ごとに行い、地図のリンク先を完成させましょう!

リンク付きの地図の色をホバーで変えてみよう。

地図の場合、マウスオーバーした際に色を変えたいという機会も多いと思いますので、そちらについても合わせて紹介しておきます。

SVGではパスの塗りの部分を「fill」という指定で変えられますので、ホバー時に地図の塗りである要素に対して、色を変更してあげれば大丈夫です。

サンプルでは、gタグを囲んでいるaタグに「map-hover」というクラスを付与して、ホバー時にaタグの中のpolygonタグのfillを変更するようにしています。

<style>
.map-hover:hover polygon {
fill: #8abf6f;<!--fillに変更する色を指定-->
cursor: pointer;<!--ホバー時カーソルをポインターに変更-->
}
</style>

<a href="#" class="map-hover"><!--aタグにクラスを追加-->
<g id="a">
<!--地図の塗りであるpolygonタグのfillを変更-->
<polygon class="cls-1" points="1267.97 526.99 1246.8 521.93 1222.46 511.8 1208.7 468.76 1213.99 445.98 1251.04 408.85 1260.56 346.41 1208.7 294.94 1182.24 283.97 1103.92 283.13 1067.94 269.62 1019.25 225.75 1018.2 197.06 1053.12 196.21 1072.17 192.84 1094.4 137.99 1083.82 121.11 1034.07 89.89 893.31 18.17 900.72 52.76 919.77 79.77 898.6 109.3 870.02 138.83 895.43 144.74 896.48 174.27 754.66 175.96 689.04 183.56 665.76 199.59 666.76 221.93 697.51 225.75 734.55 225.75 775.83 243.47 795.94 266.25 806.52 298.31 822.4 315.19 830.87 342.19 834.04 378.48 847.8 386.92 891.19 429.11 925.06 459.48 918.71 483.95 917.88 484.83 938.82 488.17 971.63 513.49 1040.42 530.36 1069 530.36 1093.34 553.15 1172.72 609.68 1195.57 652.54 1228.81 651.03 1234.1 602.93 1280.67 559.9 1283.85 550.62 1267.97 526.99"/>
<g>
<path class="cls-2" d="M993.32,320.24c-8.08,0-9.78.17-10,3.64-.16,1.94-.08,5.9-.16,10.58,0,1.62.08,1.62,10,1.62,3.71,0,7.59,0,9.05-.08,4.52-.24,4.52,4,4.52,4.28,0,2.34-1.45,4.61-4.28,4.61H1002c-2-.17-5.09-.25-8.16-.25-10,0-10.82.08-10.82,1.78,0,12,.08,13.9.24,15.27.4,3.72,1.7,3.88,13.09,3.88,4.76,0,9.94-.08,11.47-.16h.4a4.1,4.1,0,0,1,4.37,4.12c0,2.18-1.62,4.36-5.09,4.52-1,.08-5.74.16-10.43.16s-9.29-.08-10.34-.16c-7.43-.56-12-3.23-12.36-10.34-.16-3.39-.16-9.37-.16-15.92,0-9.85.08-20.84.24-25.93.16-6.46,4.36-9.86,10.91-10.18,1.45-.08,6.06-.16,10.58-.16s9,.08,10.26.16c3.07.16,4.53,2.18,4.53,4.28a4.45,4.45,0,0,1-4.77,4.36S998.81,320.24,993.32,320.24Z"/>
<path class="cls-3" d="M993.32,320.24c-8.08,0-9.78.17-10,3.64-.16,1.94-.08,5.9-.16,10.58,0,1.62.08,1.62,10,1.62,3.71,0,7.59,0,9.05-.08,4.52-.24,4.52,4,4.52,4.28,0,2.34-1.45,4.61-4.28,4.61H1002c-2-.17-5.09-.25-8.16-.25-10,0-10.82.08-10.82,1.78,0,12,.08,13.9.24,15.27.4,3.72,1.7,3.88,13.09,3.88,4.76,0,9.94-.08,11.47-.16h.4a4.1,4.1,0,0,1,4.37,4.12c0,2.18-1.62,4.36-5.09,4.52-1,.08-5.74.16-10.43.16s-9.29-.08-10.34-.16c-7.43-.56-12-3.23-12.36-10.34-.16-3.39-.16-9.37-.16-15.92,0-9.85.08-20.84.24-25.93.16-6.46,4.36-9.86,10.91-10.18,1.45-.08,6.06-.16,10.58-.16s9,.08,10.26.16c3.07.16,4.53,2.18,4.53,4.28a4.45,4.45,0,0,1-4.77,4.36S998.81,320.24,993.32,320.24Z"/>
</g>
</g>
</a>

完成のサンプルページへ

まとめ

いかがでしたでしょうか?

地図以外でも、ホバーアニメーション付きの画像などを作成するときに利用できそうなので、ぜひお試しください。