0
0

リンク付き地図のHTML/CSS実装方法

Posted at

はじめに

都道府県毎にジャンプ機能がある地図を作る必要があったため投稿します。

開発環境

illustrator、HTML/CSS

illustratorでSVG画像のHTMLコードを出力

名前を付けて保存(ファイル形式:svg)で保存を押すとSVGオプションが出てきます。そこでSVGコードを吐き出すとHTML用のコードが出力されます。

今回参考にさせていただいたのはこの記事です。
IllustratorからhtmlにSVGアイコンを表示するまでの流れ
https://qiita.com/tsuka-rinorino/items/beef32750b3a8c5a1aca

HTML/CSSで実装

HTML
<!DOCTYPE html>
<html lang="jp">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<!-- width="930" height="494" -->
	<div class="svg-container">
		<svg viewBox="300 500 930 494">
			<filter id="drop-shadow">
				<feGaussianBlur in="SourceAlpha" stdDeviation="10" />
				<feOffset dx="0" dy="0" result="offsetblur" />
				<feFlood flood-color="rgba(0,0,0,0.7)" />
				<feComposite in2="offsetblur" operator="in" />
				<feMerge>
					<feMergeNode />
					<feMergeNode in="SourceGraphic" />
				</feMerge>
			</filter>
			<g class="carte" transform="">
				<path class="st0" d="M921.4,388.6c-5.7-6.5-9.1-6-14.9-1l-4-4.6l6.3-3.4c0,0-8.7-11.6-16.1-5.1c-7.4,6.5-9.5,9.7-9.1,3.1
				c0.4-6.7-4.6-10.5-8.3-7.2c-3.7,3.3-13-1.7-13.3,2.6c-0.3,4.3-2.8,6.8-6.3,2.8c-3.5-4,3.1-11.9-7.4-2.7
				c-10.5,9.2-29.8,21.5-37.6,21c-7.8-0.5-9.7-4.5-11.9-0.8c-7.1,12,11.8,7.1,11.3,14.9c-0.5,7.8,4.7,8.8,0.7,12.4
				c-4.1,3.6-6.2,13.3-6.2,13.3l10.7,4.2c0.4-6.1,6.9-16,15.6-15.4c8.7,0.6,15.5-5.5,15.5-5.5s0.3,0.4,3.2,3.6
				c2.8,3.2,6.8,2.6,9.8,0c3-2.6,4.4-3.9,8.5-7.5c4.2-3.7,4.1,1.6,9.1,1.9c5,0.3,1-5.5,5.6-9.5c4.6-4,19.1-11.8,26.9-11.3
				c7.8,0.5,6.3,5.1,10.6,1.3C932,385.4,921.4,388.6,921.4,388.6z" />
				<path class="st0" d="M804.7,433.9c-8.6,2.9-11.1,1-17.5,6.7c-6.5,5.7-6.2,2.2-18.6,4.9c-12.4,2.7-25.8,15.3-32.7,7.5
				c-6.9-7.9-20.9-14.3-23-21.5c-2.2-7.2,0.5-9.5-9.6-0.6c-10.1,8.9-19.9,24.8-20.6,37c-0.8,12.2-12.3,18-12.6,22.5
				c-0.3,4.6,3.9,9.1-0.9,13.2c-4.7,4.2-12.6,10.1-18.6,15.4c-6,5.3-8.7,12.5-13.9,12.2c-5.2-0.3-11.3-0.7-16.8,4.2
				c-5.5,4.9-6.5,15.3-14.6,14.8c-8.1-0.5-10.1,2.8-16.5,8.5c-6.5,5.7-9.6,13.3,6.6,6.5c16.1-6.8,19.1-6.2,23.3-9.8
				c4.2-3.7,7.9-7.3,11.5-3.2c3.7,4.2,4-1.9,3.3,10.2c-0.8,12.2-4.4,25.8,10.2,12.9c7.4-6.5,7.6,15.3,1.5,14.9
				c-6.1-0.4-9.1,6.4-2.6,13.8c3.7,4.2-6.1,6.6-6.5,14c-0.5,7.4,13.1,2.6,12.2,16.3c-0.9,13.7,5.1,3.1,8,0.5
				c2.9-2.5,8.8-8.4,8.4-2.2c-0.7,11.2,2.9,4.5,6.6,1.3c3.7-3.3,0-14.9,0.4-21c0.4-6.1-4.9-5.5,1.1-17.4c6-11.8,31.9-42,38.8-48.1
				c6.9-6.1-1.2-8.8,8.2-26.5c9.4-17.7,21.5-32.5,25.9-32.2c4.5,0.3,9.8-15.2,12.6-17.6c2.8-2.4,9.1-2,14.2-1.7
				c5.1,0.3,10.8,5.9,16.4,1.1c5.5-4.9,12.6-10,25.6-15.8c-5-5.7,1.1-16.5,1.1-16.5L804.7,433.9z" />
				<path class="st0"
					d="M814.4,454.2c11.1,0.7,22.1,6.1,26.1,10.7c4.1,4.6,10.9,9.9,16.1,5.4c5.2-4.5,6.5-3.1,12.6-3.4
				c6.1-0.3,4.4,3.6,3.9,10.6c-0.4,7,8.6,11.9,13.8,12.2c5.2,0.3,8.9-2.9,8.7,0.6c-0.2,3.5,4,3.9-0.5,7.9c-4.6,4-2.7,5,1.3,9.5
				c4,4.5-0.2,2.8,4.4-1.2c4.5-4,4.4-2.5,8.4,2c-0.5,8.5-8.8,30-13.4,34c-4.6,4.1,0.9,13.1-5.6,18.8c-6.5,5.7-3.1-5.4-7.2-10.1
				c-4.1-4.6-5.4,3-9.2-5.9c-3.8-8.9-8.6-10.3-14.9-17.5c-6.3-7.2-18.5-2.9-26.4-3.4c-7.8-0.5-1.9-6.2-22.7,2
				c-20.8,8.3-17.9,5.7-26.3,13.1c-8.4,7.4-26.3,28.9-26.8,35.8c-0.4,6.9,6.3,10.9,2.2,19.3c-4,8.5-8.3,20.4-12.6,20.1
				c-4.3-0.3-13.7,3.5-14,8.3c-0.3,4.8,3.7,13.5-1.1,17.8c-4.8,4.3-8.7,9.7-4.4,14.5c4.3,4.8,5.9,9.5-0.6,9.1
				c-6.5-0.4-12-6.7-15.7-10.8c-3.7-4.2-6.4,3.7-6.4,3.7c-2.9,2.5-5.2,8.3-7.9,5.2c-2.7-3.1-8.3-7.1-11.7-7.3
				c-3.5-0.2-3.9,0.2-8.6,4.2c-4.6,4.1-3.6-11.1-3.6-11.1c7.2-6.3,4.2-4.2,4.5-9.3c0.3-5.1-5.6-5.5-5.6-5.5c3.7-3.3,0-14.9,0.4-21
				c0.4-6.1-4.9-5.5,1.1-17.4c6-11.8,31.9-42,38.8-48.1c6.9-6.1-1.2-8.8,8.2-26.5c9.4-17.7,21.5-32.5,25.9-32.2
				c4.5,0.3,9.8-15.2,12.6-17.6c2.8-2.4,9.1-2,14.2-1.7c5.1,0.3,10.8,5.9,16.4,1.1c5.5-4.9,12.6-10,25.6-15.8L814.4,454.2z" />
				<path class="st0" d="M307.1,651.2c0,0-3.4,3-3.9,9.8c-0.4,6.8,6.3,7.1,11.7,7.5c5.5,0.3,2.8-2.4,7.1-6.3c4.3-3.8,13.6,5,16.1,7.7
				c2.4,2.8-0.9,14.8-1.2,19.1c-0.3,4.3-0.6,10-5.4,9.7c-4.8-0.3-5.5,4.9-11.6,10.2c-6,5.3-2.3,8.6-13.9,7.8
				c-11.6-0.7-6.2-6.5-5.9-10.8c0.3-4.3,0.6-8.7,5.2-12.7c4.6-4.1,3.9-7-11.1-8c-15-1-5.1,4.5-9.5,8.4c-4.4,3.9-8.1-0.5-14.6,5.1
				c-6.4,5.7-1.9,9.1-7,13.5c-5.1,4.5-7.8-0.5-14.3,5.2c-6.5,5.7-6.2-2.4-0.7-7.3c5.5-4.9,6.9-8.9,7.3-14.5
				c0.4-5.6-7.2-3.1-10.8-7.2c-5.1-5.8-11.5-13.1-11.1-18.6c0.4-5.5,1.3-13.1-4.8-20c-6.1-6.9,0.8-12.7,4.5-15.9
				c3.6-3.2,8.8,4,12.4,0.8c3.6-3.2,5.5,18.3,4.9,28.7c-0.7,10.4,6.5,7.4,14.3,7.9c7.8,0.5,7.4-6.5,7.8-12.3
				c0.4-5.8-5.2-17-10.7-23.3c-5.5-6.3,0.3-5.1-7.5-5.6c-7.8-0.5-7.4-0.5-12.7-6.5c-5.3-6-5.8-9.8-17-6.3
				c-10,3.1-16.2-12.1-7.6-11.6c8.6,0.6,2.7-7.9,3.3-16.3c0.5-8.3,10.9-13.2,14.5-9c3.7,4.2,14.6,7,18.2,11.1l0.9,0.7
				c-5.7,5-3.4,4.1-3.8,10.1c-0.4,6.1-0.7,13,6.1,13.5c6.8,0.4,7.8-1,12.7,7.1c8.3,13.8,17.4,29.7,18.9,20.2
				C289,636.4,303.4,647,307.1,651.2z" />
				<path class="st0" d="M383.8,797.2l4.1,9.3c-0.9,13.9,6.5,7.4,13,14.8c6.5,7.4,9.6,0.6,8.9,10.2c-0.6,9.6,3.4,10.1,7.9,15.2
				c4.5,5.1,8.2,9.4,15.1,9.8c6.9,0.4-0.1,7.3,5.2,13.3c5.3,6,7.2,8.2,14.4,8.7c7.2,0.5,5.9,6.7,5.5,13.4c-0.4,6.7-0.5,7.2-0.9,14.6
				c-0.5,7.4-6.9,6.1-12.5,11c-5.5,4.9-5.6-0.4-6,5.3c-0.4,5.6-6.9,6.1,0.9,6.6c7.8,0.5,5.1,0.3,4.8,5.4c-0.3,5.1,5.7,6.5-0.8,12.2
				c-6.5,5.7-7.9,6.9-17,10.4c-9.1,3.5-4.8,8.7-8.9,12.4c-4.2,3.7-11,9.7-18.1,9.2c-7.2-0.5-9,7.9-13.8,7.6
				c-4.8-0.3-4.4-5.1,1.2-18.6c5.6-13.6,5.6-13.7,10-17.7c4.5-3.9,0.7-10.4,1.4-21.7c0.7-11.3-8.8-2.3-11.9-21.7
				c-1.4-8.6,4.9-7.1,10-11.6c5.1-4.5-2-6,2.8-10.3c4.9-4.3,0.4-5.6-3.3-9.8c-3.7-4.2-4.9-5.5-11.8-6c-6.9-0.4-8.8-6.2-13.4-2.2
				c-4.6,4.1-4.2,3.7,1.5,10.1c5.7,6.5,6.5,7.4,10.8,7.7c4.3,0.3,8.8,4.9,8.5,10.1c-0.3,5.2-8.1,11.7-16.4,1.8
				c-2.8-3.3-2.5-7.9-6.5-12.5c-4.3-4.9-6.9,6.1-7.5,14.8c-0.6,8.7,2.9,9.8,2.4,16.7c-0.4,7-4,11.7,2.5,19.1
				c6.5,7.4,6.3,7.2,13.2,7.6c6.9,0.4,4.8,0.3-0.3,4.8c-5.1,4.5-0.1,6.4-4.1,9.8c-4,3.5-0.6,9.9-5.8,9.6c-5.2-0.3-9.6-0.6-9.3-4.1
				c0.2-3.5,0.4-6.4-6.5-6.9c-6.9-0.4-25.9-9.5-31.7-4.4c-5.8,5.1-11.6-0.7-11.6-0.7s-6.4-7.2-5.8-15.2c0.5-8-8-9.1-3.7-12.8
				c4.3-3.8,7.5,0.5,11.3,4.8c4.6,0.3,7-15.1,12.7-20.1c5.7-5,1.2-10.4,4.9-13.6c3.7-3.3-5.7-6.5-5.2-13.4c0.4-7,1-15.6-4.5-10.8
				c-5.5,4.9-9.2-0.6-8.8-6.7c0.4-6.1,0.4-5.7,5.4-10.1c5-4.4,0.5-5.2,0.9-11.3c0.4-6.1-6.5-7.4-6-15.2c0.5-7.8,6.5-5.7-3.3-16.8
				c-9.8-11.1,0.4-6.1,0.8-12.5c0.4-6.4,5.5-10.2,11.5-3.3c6.1,6.9,9.3-2.5,16.2-8.5c-0.4,6.9,5,3.8,7.4,6.6
				c2.4,2.8,9.9,0.5,14.4-3.4c4.5-3.9,1-2.6,8.5,5.9c7.5,8.5,11.7,8.3,15.2,5.2L383.8,797.2z" />
				<path class="st0" d="M925.8,388.9c6.2-3.5,2.5-7.7,6.2-3.5c3.7,4.2,3.4,4.4,9.5-1c0,0,3.5,3.7,5,5.9c4.9,7.2,0-0.4-0.6,8.7
				c-0.6,9.1-4.8,13.6-1.1,17.8c3.7,4.2-2.2,6.7,10,7.5c12.2,0.8,9.6,0.3,9.2,7c-0.4,6.8-10.6,15.7-1,16.4c9.6,0.6,7.6-2.5,0,4.2
				c-7.6,6.7-12.5,6.2-18.2,11.2c-5.6,5-3.8,3.3-12.1,10.6c-8.3,7.3-22.3,28.9-23.4,35c-4-4.5-3.9-6-8.4-2c-4.5,4-0.4,5.7-4.4,1.2
				c-4-4.5-5.9-5.5-1.3-9.5c4.6-4,0.3-4.5,0.5-7.9c0.2-3.5-3.5-0.2-8.7-0.6c-5.2-0.3-14.2-5.3-13.8-12.2c0.4-6.9,2.2-10.8-3.9-10.6
				c-6.1,0.3-7.4-1.1-12.6,3.4c-5.2,4.5-12-0.8-16.1-5.4c-4.1-4.6-15.1-10-26.1-10.7l0,0.3c-5-5.7,1.1-16.5,1.1-16.5
				c0.4-6.1,6.9-16,15.6-15.4c8.7,0.6,15.5-5.5,15.5-5.5s0.3,0.4,3.2,3.6c2.8,3.2,6.8,2.6,9.8,0c3-2.6,4.4-3.9,8.5-7.5
				c4.2-3.7,4.1,1.6,9.1,1.9c5,0.3,1-5.5,5.6-9.5c4.6-4,19.1-11.8,26.9-11.3c7.8,0.5,6.3,5.1,10.6,1.3
				C924.6,391.9,925.9,389.9,925.8,388.9L925.8,388.9z" />
				<path class="st0" d="M1182.4,193.9c-7.3-8.3-6.4-32.7-5.9-41.2c0.5-8.5-5.4-4.2-10.3-6.1c-13.6-5.2-13.6-5.2-8.9-18.5
				c0,0-6.2-4.2-12.1-4.5c-5.9-0.4,0,0-5.4,4.7c-5.4,4.7,0,0-0.4,6.9c-0.4,7,7.7,12.1-0.6,9c-8.2-3.1-2.8,2.4-6.4,5.6
				c-3.6,3.2-6.2,5.5-10.2,1c-4-4.5-4.5,3.9-7.2,6.4c-2.7,2.4-3,6-3.6,15.7c-0.6,9.7-4,8.3-10.1,8c-4.6-0.3-5.9,1-9.8,4.7h0
				c4,4.5,10.2,6,9.5,16.3c-0.7,10.3-1.1,14.7,2.3,28.8c3.5,14.2,7.5,31.9,14,26.2c6.5-5.7,3-2.7,6.9,1.7c3.9,4.4,0.2,11,8,11.5
				c7.8,0.5,7.9-1.2,7.3,8.3c5.5-4.9,1.3,1.7,8.5-4.7c7.2-6.3,2.6-6.9-1.5-11.4c-4-4.6,3.2-7,5.9-3.9c2.7,3.1,4.9,1.1,9.2,1.4
				c4.3,0.3,3,1.5,7.6-2.6c4.6-4.1,0.6-6.7,5-10.6c4.4-3.9,6.3-7.4,6.7-13.5c0.4-6.1,5.2-13.7,8-16.1
				C1191.5,214.6,1182.4,193.9,1182.4,193.9z" />
				<path class="st0" d="M1232,222.4c-5.3-6-13.5-4.6-17.3-9c-5.7-0.4-14.2-9.4-13.5-19.8l-18.8,0.3c0,0,9.2,20.7,6.5,23.1
				c-2.7,2.4-7.6,10-8,16.1c-0.4,6.1-2.3,9.7-6.7,13.5c-4.4,3.9-0.4,6.5-5,10.6c-4.6,4.1-3.2,2.8-7.6,2.6c-4.3-0.3-6.5,1.6-9.2-1.4
				c-2.7-3-9.9-0.6-5.9,3.9c4,4.6,8.7,5.1,1.5,11.4c-7.2,6.3-3-0.2-8.5,4.7c-0.8,12.8-0.5,8.7-1.1,17.4c-0.6,8.7-2,14.6,5,15
				c7,0.5,11.2,3.4,10.8,9.5c-0.4,6.1,8.9,10.2,9.2,6.7c0.2-3.5,5.9-3.1,5.9-3.1c-3.7,3.3,1,8.8,5.2,9.1c4.2,0.3,0,11.3-5.2,11
				c-5.2-0.3-5.5,4.9-10.8,4.5c-5.2-0.3-5.5,4-0.9,14.8c4.5,10.8,3.2,12-3.3,17.7c-6.5,5.7,0.7,22.3-7.5,21.8
				c-8.2-0.5-1.3,11.2-7.8,10.8c-6.4-0.4-4.9,14.4-9.9,8.7c-5-5.7-0.7,2.8-3.7,11.4c5.6,6.3,4.2,22.1,10.8,22.5
				c6.6,0.4,9.1,3.2,9.1,3.2c0.5-7.9,6-12.7,9.3-15.6c3.2-2.8-5,2.7-0.4-7c4.6-9.7,6.6-9.6,14.3-9.1c7.7,0.5,3.9-3.4,8.1-7.2
				c4.2-3.7,7.6-6,3.7-10.4c-3.9-4.4,7.8,2.8,2.6-10c-5.3-12.8-4.5-13.4,3-20.1c7.5-6.6,10.9-17.4,19.2-16.9
				c8.3,0.5,9.3-0.4,14.4-4.9c5.1-4.5,11.4-20,18.8-11.6c7.4,8.4-1.6-1.8,8-1.2c9.7,0.6,4.2,9.9,13.7,10.5c0,0,10.1-6.2,4.8-6.5
				c-6.6-0.4,0,0-2.1-13.3c-1.1-6.9,10.1-16.8-0.4-17.5c-10.4-0.7-34.8-27-40.4-22c-5.7,5-6,4.6-12.5-2.8
				c-6.5-7.4-3.6-16.1,1.3-20.4c4.9-4.3,11.8-24.4,9.6-34.6C1218.3,228.5,1222.9,228.1,1232,222.4z" />
				<path class="st0" d="M1125.4,433.6c3-8.5-1.4-17.1,3.7-11.4c5,5.7,3.5-9.1,9.9-8.7c6.4,0.4-0.5-11.4,7.8-10.8
				c8.2,0.5,1-16.1,7.5-21.8c6.5-5.7,7.9-6.9,3.3-17.7c-4.5-10.8-4.3-15.1,0.9-14.8c5.2,0.3,5.5-4.9,10.8-4.5
				c5.2,0.3,9.4-10.7,5.2-11c-4.2-0.3-8.9-5.8-5.2-9.1c0,0-5.7-0.4-5.9,3.1c-0.2,3.5-9.6-0.6-9.2-6.7c0.4-6.1-3.8-9.1-10.8-9.5
				c-7-0.5-5.6-6.4-5-15c0.3-4-3-2.6-2.9-4.2c0.3-5.1-1.6-3.7-7.4-4.3c-5.8-0.5-5.1,4.3-10.8,3.9c-5.7-0.4-2.8-3.4-9.3-1.1
				c-6.6,2.3-9.9,1.4-10.1-3.2c-0.2-4-7.4-15.4-9.6-3.4c-2.2,12-0.5,14.9,0.9,20.4c1.4,5.6,9.3,7.9,7.2,12c-2.1,4.1-5.9,2.8-6.4,10
				c-0.5,7.2,8.1,9.6,6.3,15.2c-1.8,5.7-8.5,7.2-9.4,13.7c-0.9,6.5,6.9,16.5,6.6,21.6c-0.3,5.1-14.2,11.4-13.1,19.8
				c1.2,8.4,5.4,8.1,9.5,13.6c4.1,5.5-2.2,13.9-2.5,18.1c-0.3,4.2,7.8,13.6,10.5,10.9c2.7-2.6,4.6-11.5,10.9-11.1
				C1115.2,428.1,1122.7,432.5,1125.4,433.6z" />
				<path class="st0" d="M1145.3,459.3c0.5,7.1-1.6,11.2-8,23.9c-6.4,12.7-4.8-2.5-10.8,9.8c-3.3,6.7,0.4,7.4,6.8,7.8
				c5.3,0.3,3.5,4-0.5,7.5c-4,3.5-9.3,8.1-8.8,1.6c0.4-6.5,0.5-7-4.7-2.5c-5.2,4.6-12.8-0.8-22.2-1.4c-9.3-0.6-17.6-6.9-22.8-12.8
				c-5.2-5.9-14.9-9.2-11.6-12.1c3.2-2.8,9.2-8.1-4.4-13.4c-8.9-3.4,2.1-6-10.6,1.9c-17.2,10.7-10.2-4.1-9.9-9.4
				c0.3-5.2-5.2-0.3-4.7-7.6c0.5-7.2-3.9-6.9-10.4-1.2c-6.5,5.7-9.8-48.5-4.2-56.5c8-11.4-6.9-3.5-2.6-11.4c4.3-7.9,4.3-7.9,6.1-5.6
				c4.7,6,11.3-4.4,11.3-4.4c3.7-8.8,4.2-4.9,7.9-0.8c3.7,4.2,4.1,4.6,6.8-3.5c2.7-8.1,6.1,0.4,10.4,0.7c4.3,0.3,5.1-12.2,13.8-11.7
				c8.7,0.6,8.6,1.8,14.6-3.5c-0.9,6.5,6.9,16.5,6.6,21.6c-0.3,5.1-14.2,11.4-13.1,19.8c1.2,8.4,5.4,8.1,9.5,13.6
				c4.1,5.5-2.2,13.9-2.5,18.1c-0.3,4.2,7.8,13.6,10.5,10.9c2.7-2.6,4.6-11.5,10.9-11.1c6.3,0.4,13.8,4.8,16.5,5.9
				c5.6,6.3,4.2,22.1,10.8,22.5C1142.8,456.5,1145.3,459.3,1145.3,459.3z" />
				<path class="st0" d="M898.3,313.5c-7.7-8.8-4.9-26-11-33c-6.1-6.9,12.3-28,12.9-37.5c0.6-9.6,3.1-4-2-9.7
				c-4.9-5.5-13.4,4.4-17.7,4.1c-4.3-0.3-2-10.7-1.7-15.9c0.3-5.2,0,0-4.3-4.9c-4.3-4.9-4-2.4-7.5,0.8c-3.6,3.1-11.6,8.1-16.7,2.3
				c-4.4-5-2.9-14-10-7.8c-7.1,6.2-29,17.2-30.8,12.3c-4.5-12-2-4.3-9.1-4.8c-7.1-0.5-3.8,5.9-7.8,9.4c-5.5,4.9-6.3,6.2-15.8,14.6
				c-5.5,4.9-11.3,5.8-11.6,11c-0.3,5.2-9.6,13.3-13.7,17c-0.6,10,2.2,19.3,5.9,23.5c3.7,4.2,7.5,4.9,6.6,18.8
				c-0.9,13.9,2.1,16.9,10,17.4c-0.6,9.1-3.7,21.3-0.1,32.9c6.9,0.4,16.4,1.9,22-2.9c5.5-4.9,15.7-8.9,22.1-1.6
				c6.4,7.3,13.7,0.4,18.9,0.7c5.2,0.3,20.9-12.6,21.3-20c0.5-7.4,1.5-9.9,8.5-9.5c6.9,0.4,6.5,0,11.4,5.5c5.2,0.3,3.5-6.1,4.6-7.1
				c1.1-1-5.9-2.2,0.5-7.8C889.5,315.7,897.9,319.3,898.3,313.5z" />
				<a href="hiroshima.html">
					<path id="st1" d="M751.4,271.3c-0.6,10,2.2,19.3,5.9,23.5c3.7,4.2,7.5,4.9,6.6,18.8c-0.9,13.9,2.1,16.9,10,17.4
					c-0.6,9.1-3.7,21.3-0.1,32.9c-5.1,4.5-9.2,13.8-14.3,18.3c-5.1,4.5-20.5,7.3-30.1,6.7c-9.6-0.6-11.4-0.7-20.1,7
					c-8.8,7.7-13.3,11.7-20.3,11.3c-6.9-0.4-11.4,5.7-11.7,10.4c-0.3,4.7-4.4-5-9.8-5.3c-5.4-0.3-9,7.9-13.4,7.7
					c-4.3-0.3-9.1-0.6-8.8-5.3c0.3-4.7,0.8-12.2-5.3-19.1c-6.1-6.9-20.9,7.9-27,13.3c-6.1,5.4-8,2.7-14,2.3c-6-0.4-4.8-4.7-9.7-10.3
					c-4.9-5.6-6.2-10.5-2.3-13.9c3.9-3.5,0.7-10.9-5-17.3c5.5-4.9,19.6-18.2,11-22.4c-9.3-4.5-3.6-12,1-16.1
					c4.6-4.1,10.2-11.2,14-6.9c3.7,4.3,8.7,0.6,13,0.8c4.3,0.3,11.7-4.9,18.6-4.5c6.9,0.4,24.9-13.7,30.4-18.5
					c5.5-4.9,5.3-4.7,1.7-8.7c-3.6-4.1-8-2.6,0.4-6.5c16.3-7.5,22.2-19.5,26.9-23.7c4.7-4.2,9.8-2.6,14.1-2.3
					c4.3,0.3,11.3,0.7,15.5,5.5c4.2,4.8,3.8,4.3,9.5-0.6C743.9,260.5,745.3,264.4,751.4,271.3z" />
					<path class="st0" d="M1135.6,290" />
				</a>
				<path class="st0" d="M751.4,271.3c-6.1-6.9-7.5-10.9-13.1-5.9c-5.7,5-5.3,5.4-9.5,0.6c-1-1.2-3.1-1.4-4.4-2.1l0.2-0.2
				c3.8-3.4,4.6-4.7,5-11.7c0.4-6.9,7.8-1.7,4.6-5.4c-2.3-2.6-8.3-0.5-4.6-3.8c3.7-3.3,4.5-9.3,10.2-8.9c5.6,0.4,4.2-3.7,10.9-12.8
				c6.7-9.2-5.7-6.5-5.3-12.9c0.1-1.7-2-3.8-2-3.8c7.9,0.5,8.1,2.8,16,2.2c7.9-0.6,0.4-6.7-5.7-7.1c-6.1-0.4-6.3-0.4-9-8.4
				c-2.7-8-3.7-11.9,1.5-11.6c5.2,0.3,5.5-4.6,7.6,4.3c2,8.5,7.3,8.3,13.4,8.7c6.1,0.4,12.7-8.1,22.5-10.2c3.8-0.8,26,1.7,33,2.1
				c7,0.4,18.5-2.9,34.4-5.9c15.9-3,19.1,0.9,22.2-6.6c3.1-7.5,16.2-9.5,20.5-13.2c0,0,6.1,6.3,5.6,14.9c-0.5,8.5,0.1,15.7,6,16
				c6,0.4,5.7,5.5,5.2,12.4c-0.4,6.9,6.8,12.5,1.5,17.2c-5.3,4.6-1,9.7-10.4,9.1c-9.4-0.6-4.3,5.1-9.7,4.8
				c-4.9-5.5-13.4,4.4-17.7,4.1c-4.3-0.3-2-10.7-1.7-15.9c0.3-5.2,0,0-4.3-4.9c-4.3-4.9-4-2.4-7.5,0.8c-3.6,3.1-11.6,8.1-16.7,2.3
				c-4.4-5-2.9-14-10-7.8c-7.1,6.2-29,17.2-30.8,12.3c-4.5-12-2-4.3-9.1-4.8c-7.1-0.5-3.8,5.9-7.8,9.4c-5.5,4.9-6.3,6.2-15.8,14.6
				c-5.5,4.9-11.3,5.8-11.6,11C764.8,259.6,755.6,267.7,751.4,271.3z" />
				<path class="st0" d="M724.4,263.2c-3.9-2.2-7.9-2.4-11.2-2.6c-4.3-0.3-9.4-1.8-14.1,2.3c-4.7,4.2-10.6,16.1-26.9,23.7
				c-8.4,3.9-4,2.5-0.4,6.5c3.6,4.1,3.8,3.8-1.7,8.7c-5.5,4.9-23.5,19-30.4,18.5c-7-0.4-14.3,4.8-18.6,4.5c-4.3-0.3-9.3,3.4-13-0.8
				c-3.7-4.3-9.3,2.9-14,6.9c-4.6,4.1-10.3,11.5-1,16.1c8.6,4.2-5.5,17.5-11,22.4c-6,5.3-5.9,3.5-6.6,14c-0.7,10.4-0.9,11.3-7,16.7
				c-6.2,5.4-23.6,8.2-23.3,4.2c0.4-5.7,1.1-12.8,1.1-17.8c0-5-4.3-10.5-9.9-5.6c-5.5,4.9-13.5,0-13.3-3.9
				c0.3-3.9,4.6-10.6,5.1-17.6c0.4-6.9-3.9-11.5-3.9-11.5c-2.3-0.1,0.7,0,0.7,0c6.7-5.9,12.5-4.9,16.7-8.6
				c4.2-3.7,6.5-10.1,11.4-14.4c4.9-4.3,15.1-13.3,26.4-23.2c11.3-9.9,27-20.1,31.3-32.9c4.3-12.8,29.9-23.8,35.9-29.1
				c6-5.3,11.6-3.6,12.3-15.8c0.8-12.2,8.3-20.8,16.1-20.3c7.8,0.5,13.5-3.4,13.8-7.6c0.3-4.2,2.9,0.2,10.3,0.7
				c5.2,0.3,14.8-9.7,20.8-15.1c6.1-5.3,16-3.3,20.1,1.3c4.1,4.6-8,2.1-8.3,7.3c-0.3,5.2,2.1,6.4-3.9,8.3c-9.2,3-23.9,1.9-29.3,6.6
				c-5.3,4.7-5,8.5,6.5,5.5c11.5-3.1,17.1-8.8,23.2-8.4c6.1,0.4,17.5-0.4,17.1,6c-0.4,6.4,12,3.7,5.3,12.9
				c-6.7,9.2-5.2,13.2-10.9,12.8c-5.6-0.4-6.5,5.7-10.2,8.9c-3.7,3.3,2.3,1.2,4.6,3.8c3.3,3.7-4.1-1.6-4.6,5.4
				c-0.4,6.9-1.1,7.6-5,10.9l0,0.7L724.4,263.2z" />
				<path class="st0" d="M608.6,451.8c0.6-9.6,3.3-5.9,3.6-11.1c0.3-5.2-5.1-21.6-4.7-28.8c-2.6,0.5-4.7-0.6-8.5-0.9
				c-6-0.4-4.8-4.7-9.7-10.3c-4.9-5.6-6.2-10.5-2.3-13.9c3.9-3.5,0.7-10.9-5-17.3c-6,5.3-5.9,3.5-6.6,14c-0.7,10.4-0.9,11.3-7,16.7
				c-6.2,5.4-23.6,8.2-23.3,4.2c0.4-5.7,1.1-12.8,1.1-17.8c0-5-4.3-10.5-9.9-5.6c-5.5,4.9-13.5,0-13.3-3.9
				c0.3-3.9,4.6-10.6,5.1-17.6c0.4-6.9-3.2-11.5-3.2-11.5c-10-0.6-16.7,8.5-24.1,15c-7.4,6.5-19.8,24.7-26.4,30.4
				c-6.5,5.8-25.7,12.8-31.8,5.9c-6.1-6.9-20.5-7-20.7-2.8c-0.3,4.1,4.1,3.6,3.8,8.8c-0.3,5.2-10.4-0.1-14.6,3.6
				c-4.2,3.7-7.4,8.8-3.1,13.6c8.9,10.2,10.3,16.8,2,16.3c-8.2-0.5-5.1,11-1.4,15.2c3.5,4,9.5,6,9.6,12.8c2.3,1,4.3,2.3,6.1,3.7
				c0-5,13.7-10.5,17.6-6c4.7,5.3,3.7,4.2,9.1,10.3c5.4,6.1,16.3,5.2,20.7,1.3c4.5-3.9,9.8-11.3,16.2-10.9
				c6.3,0.4,13.6,8.7,14.1,0.9c0.5-7.8,5.7-7.5,10.9-7.1c5.2,0.3,14.7,1.8,21.2-3.9c6.5-5.7,9.6-0.3,12.6,6.9c3,7.2,4.9,5.5,8.1,2.7
				c3.2-2.8,2.1,8.8,8.1,9.2c6.1,0.4,4.8,0.3,12.2,0.8c7.4,0.5,11.3-5.6,10.7,3.9c-0.6,9.4,5.5,9.8,10.7,10.1
				c5.2,0.3-3.8-9-3.3-16.8c0.5-7.8,7.5-0.8,14.4-6.9C614.7,458.8,608,461.4,608.6,451.8z" />
				<a href="fukuoka.html">
					<path id="st1" d="M453,532.1c-2.8-3.2-5.7-13.9-12.6-14.4c-6.9-0.4-13.4-7.8-13-14.7c0-0.1,0-0.2,0-0.3
					c-4.8-6.4-9.4-12.8-10.1-20c-7-0.7-15.2-2.5-15-6.6c0.3-4.5-6.4-0.4-11.6-0.7c-5.2-0.3-9.2,7.3-13.5,7c-4.3-0.3-9,3.8-16.8,10.7
					c-7.9,6.9-9.7,8.5-17.1,15c-7.4,6.5-12.1,18-8.4,22.1c3.7,4.2,5.2-0.9,9.3,3.8c4.2,4.8-4.5,11.1-8,7c-3.5-4-5.9-2-8.7,0.5
					c-2.9,2.5-9.2,2.4-8.8-4.6c0.4-6.9-3.6-4.2-9.6-4.6c-6.1-0.4-2.4,7.9-8.5,7.5c-6.1-0.4-6.5,6.9-6.9,12.1c4.9-4.3,6.4-2.6,9.2,0.6
					c5.1-4.5,8.7-0.3,14.8,6.6c6.1,6.9,13.9,10.9,20.9,11.4c6.9,0.4,8.3-9.9,14.3-9.5c6.1,0.4,6,8.7-2.8,16.4
					c-8.8,7.7-17.7,17.2-18.1,24.1c-0.4,6.9-0.9,14.8-0.9,14.8c6.9,0.4,12.6,0.8,12.2,6.5c-0.4,5.6,2.2,12.6,2.2,12.6
					c9.1,0.6,6.5-5.6,11.8-5.2c5.2,0.3,0.9,0.1,5.5-4c4.6-4.1,3.5-11.1,15.2-11.9c8.7-0.6,21.8,6.5,21.8,6.5c7-13.5,10-20.3,7.6-23.1
					c-2.4-2.8-1.9-10.6-1.6-15.8c0.3-5.2,6.1-13.8,12.1-19.1c6-5.3,11.4-0.4,11.8-6.9c0.4-6.5,1.8-8.2,9-11.2
					C446,541.6,455.8,535.4,453,532.1z" />
				</a>
				<path class="st0" d="M331.2,616.3c0,0,0.5-7.8,0.9-14.8c0.4-6.9,9.3-16.4,18.1-24.1c8.8-7.7,8.9-16,2.8-16.4
				c-6.1-0.4-7.4,10-14.3,9.5c-6.9-0.4-14.8-4.4-20.9-11.4c-6.1-6.9-9.8-11.1-14.8-6.6c-2.8-3.2-4.3-4.9-9.2-0.6
				c-15,13.2-23.3,12-13.6,3.5c4.8-4.2-1-11.4-8.4-4.9c-3.1,2.7-4.9,6.4-6.1,7.5c-1.8,1.5-2.6,0.2-5.9,3.1c-5.5,4.9,4.5,10.8-1,15.6
				c-5.5,4.9,3.4,6.2-2.2,11.2c-5.7,5-5.9,8.3-6.3,14.4c-0.4,6.1-0.7,13,6.1,13.5c6.8,0.4,7.8-1,12.7,7.1
				c8.3,13.8,17.4,29.7,18.9,20.2c1-6.7,15.5,3.8,19.2,8c5-4.4-1.7-7.1-1.3-12.6c0.4-5.6,0.4-15.2,5-19.2
				C315.5,615.3,318.4,619,331.2,616.3z" />
				<path class="st0" d="M399.8,620.7c7-13.5,10-20.3,7.6-23.1c-2.4-2.8-1.9-10.6-1.6-15.8c0.3-5.2,6.1-13.8,12.1-19.1
				c6-5.3,11.4-0.4,11.8-6.9c0.4-6.5,1.8-8.2,9-11.2c7.4-3.1,17.2-9.4,14.3-12.6c-0.7-0.8-1.4-2.1-2.2-3.6v0
				c2.2,3.6,3.1-2.9,7.5,2.2c4.5,5.1,7.4-5.7,11.5-1.1c4.1,4.6,12.1,7.4,16.4,7.7c4.3,0.3,1.5-4.4,4.8-7.4
				c3.3-2.9,8.4-7.4,12.3-10.8c3.9-3.5,8.5-9.9,14.7-2.8c6.3,7.1,11.4,4.2,14.4,16.4c3,12.1,7.7,25.5-1.6,24.9
				c-9.3-0.6-1.4,2-6.2,6.2c-4.8,4.2-6.2,9.8-10.8,9.5c-4.6-0.3-8-6.6-8.6,3.2c-0.6,9.9,10.4,20.2,16.8,14.5
				c6.5-5.7,5.5,0.5,12.2-5.3c6.7-5.9,0.5-2.1,10.5-1.5c10,0.6,10.1-1.5,9.6,6.3c-0.5,7.8-7,13.5-0.9,13.9c6.1,0.4,8-3,7.5,4.8
				c-0.5,7.8-0.9-0.1,7.8,0.5c8.7,0.6,11.6,2.8,11.3,8.3c-0.4,5.5,0.1,5.5-6,5.1c-6.1-0.4-1.5-4.5-8.4,1.6
				c-6.9,6.1-7.2,10.4-0.7,10.9c6.5,0.4,6.2,4.8,10.9,0.7c4.6-4.1,1.8-0.4,2.9,2.1c1.1,2.5-0.5,8.2-0.8,11.8c-0.2,3.6-5.8,1.8-6,5.3
				c-0.2,3.6-0.5,8.9-4.3,12.3c-3.8,3.3-10.7,2.7-13.9-0.9c-3.2-3.6,6.4-3.7-2.8-8.7c-9.3-5-12.6-2.1-19.5,4
				c-6.9,6.1-6.9,2.4-10.8,5.8c-3.9,3.5-11.6,10.2-11.1,3c0.5-7.2-1.7-6.7-6.5-7.3c-4.8-0.6-2.6-6.1-8.8-0.6c-6.2,5.5-11,8-13.7,5
				c-2.7-3,3-3.1-2.5-6c-5.5-3-11.7-1.8-11.2-9.5c0.5-7.6-3.6-14-3.3-20.1c0.4-6.1-4.5-14.6-9.6-20.5c-5.2-5.9-10.3-17.7-15.2-13.4
				c-4.9,4.3-12.2,0.4-12.8,9.4c-0.6,9-6.3,2.5-0.6,9c5.7,6.5,6.2,6.1,2,9.7c-4.2,3.7-4.3,3.9-9.8,3.3
				C410.1,629.3,410.3,625.2,399.8,620.7z" />
				<path class="st0" d="M473.1,660.3c-3.7-1.2-6.6-2.2-6.3-7.5c0.5-7.6-3.6-14-3.3-20.1c0.4-6.1-4.5-14.6-9.6-20.5
				c-5.2-5.9-10.3-17.7-15.2-13.4c-4.9,4.3-12.2,0.4-12.8,9.4c-0.6,9-6.3,2.5-0.6,9c5.7,6.5,6.2,6.1,2,9.7c-4.2,3.7-4.3,3.9-9.8,3.3
				c-7.4-0.9-7.2-4.9-17.7-9.4c0,0-13.2-7.1-21.8-6.5c-11.6,0.8-10.5,7.9-15.2,11.9c-4.6,4.1-0.3,4.3-5.5,4
				c-5.2-0.3-2.6,5.8-11.8,5.2c-6,5.3-5.6,15.7-1.3,20.5c4.3,4.9,18.3,6.1,21.1,16.6c2.7,10.5,7.5,19.5,1.4,24.9
				c-2.5,2.2-4.9,6.2-8.9,8.6c-5.9,3.5-12.8,0.9-10.1,9c2.5,7.3,24.3-7.6,24.3-7.6l1.2,3.8c-6.8,4.1-6.4,11.2-11.4,15.6
				c-5,4.4-5.3,4.1-0.6,9.4c4.6,5.3-4.1,5.6-4.6,14.3c-0.6,8.7-0.8,15-6.1,19.7c-5.3,4.7-10.3,11.1-14.4,14.8
				c-0.4,6.9,5,3.8,7.4,6.6c2.4,2.8,9.9,0.5,14.4-3.4c4.5-3.9,1-2.6,8.5,5.9c7.5,8.5,11.7,8.3,15.2,5.2c3.6-3.1,12.9-0.9,12.9-0.9
				c5.4-3.1,1.3,0.5,5.4-3.1c4.2-3.7-1.1-9.7,4.2-3.7c5.3,6,3,8,10.4,1.5c7.4-6.5,6.5-12.7,12.2-6.2c5.7,6.5,10.2,6,10.5,2.3
				c0.2-3.8,3.1-7.1-3.1-7.5c-6.2-0.4-1.4-6.1-1-12.2c0.4-6.1,15.6,4.8,6.3-5.7c-9.3-10.5-2.8-8-2.3-16.7c0.6-8.7,0.4-9.3-5.1-15.6
				c-5.5-6.2-4.1-13.9,0.5-17.8c4.5-4,2.1-7.6,5.3-3.9c6.7,7.6,4.8-5,8-7.8c5.9-5.2,10.6-10.3,11.1-17.2c0.4-6.9,1.4-10,5.2-13.4
				c3.8-3.4,4.4,2.3,10.6-9.3L473.1,660.3z" />
				<path class="st0" d="M456.5,912.1c12.3,6.4,14.8,0.9,14.5,6.7c-0.4,5.7,2.4,5.1,7.9,5.4c5.5,0.4,5.3,3.6,5.6-1.9
				c0.5-7.7,6.3-5.6,2.4-10c-3.9-4.5,0.8-12.4,4.8-16c4-3.5,0,0-1.7-10.1c-1-5.9,5.4-8.3,5.9-14.9c0.4-6.6,6.8-6,7.4-14.7
				c0.6-8.7,2.2-7.7-2.2-12.8c-4.5-5.1-2.8-3.2-2.5-9.3c0.4-6.1,5.8-11.8,6.3-20.5c0.6-8.7,0.7-11.3,1.2-18.2
				c0.4-6.9,0.5-7.8,0.9-13.2c0.3-5.4,2.6-6.1,7.4-24.2c2.9-10.8,6.1-6.7,9.7-21.2c1.1-4.3,1.1-4.3,12-7.8c5.6-1.8,0.5-7.8-3.4-12.2
				c-3.9-4.4,0.6-10,5.7-14.5c5.1-4.5,0.4-6.9,9.1-6.4c8.7,0.6,9.6-10.7,9.9-14.8c0.3-4.1-5.6-6.4,0.8-11.9l0,0
				c-1.7-0.5-3.3-1.4-4.4-2.6c-3.2-3.6,6.4-3.7-2.8-8.7c-9.3-5-12.6-2.1-19.5,4c-6.9,6.1-6.9,2.4-10.8,5.8
				c-3.9,3.5-11.6,10.2-11.1,3c0.5-7.2-1.7-6.7-6.5-7.3c-4.8-0.6-2.6-6.1-8.8-0.6c-6.2,5.5-11,8-13.7,5c-2.7-3,3-3.1-2.5-6
				c-1.6-0.9-3.3-1.4-4.9-1.9l-0.5,1.6c-6.2,11.6-6.8,6-10.6,9.3c-3.8,3.4-4.8,6.4-5.2,13.4c-0.4,7-5.1,12-11.1,17.2
				c-3.2,2.8-1.3,15.4-8,7.8c-3.3-3.7-0.8-0.1-5.3,3.9c-4.5,4-5.9,11.6-0.5,17.8c5.5,6.2,5.7,6.9,5.1,15.6c-0.6,8.7-7,6.2,2.3,16.7
				c9.3,10.5-5.9-0.4-6.3,5.7c-0.4,6.1-5.1,11.8,1,12.2c6.2,0.4,3.3,3.8,3.1,7.5c-0.2,3.8-4.8,4.2-10.5-2.3
				c-5.7-6.5-4.8-0.3-12.2,6.2c-7.4,6.5-5.1,4.5-10.4-1.5c-5.3-6,0,0-4.2,3.7c-4.2,3.7,0,0-5.4,3.1c0,0-6.3-1.5-10.5-0.3l-0.2-0.8
				l4.1,9.3c-0.9,13.9,6.5,7.4,13,14.8c6.5,7.4,9.6,0.6,8.9,10.2c-0.6,9.6,3.4,10.1,7.9,15.2c4.5,5.1,8.2,9.4,15.1,9.8
				c6.9,0.4-0.1,7.3,5.2,13.3c5.3,6,7.2,8.2,14.4,8.7c7.2,0.5,5.9,6.7,5.5,13.4c-0.4,6.7-0.5,7.2-0.9,14.6c-0.1,1.8-0.6,3.1-1.4,4.1
				L456.5,912.1z" />
				<path class="st0" d="M969.4,152.3c-5.1,5.1-4.1,14,0.5,18.7c4.6,4.6,4,9.8,11,7.2c7-2.6,4.3-12.5,13.2,0s0,2.4,0,9.6
				c0,7.2-8.3,9.6-12.1,5.8c-3.8-3.8-1.9,6.8-7.7,12.6c-5.8,5.8,8.9,7.2,12.8,7.2c3.9,0,4.8,8,11.2,1.6c6.4-6.4,0.8-3.2,6.4,2.5
				s7.1,11.9,11.9,11.9s3.6,3.7,8.4,3.7c4.9,0,6.4-6.2,12.7,0c6.2,6.2-3.1,15.6-3.1,15.6c5.4,0,7,6.2,13.2,0
				c6.2-6.2,2.6,7.8,6.2,11.4c3.6,3.6,10.1,12.2,10.1,0c0-12.2,2.4-5.8,8.2,0c5.8,5.8,0.3,11.6,8.2,11.6c7.8,0,3.8,7.7,7.8,11.7
				c2.2-12,9.5-0.6,9.6,3.4c0.2,4.7,3.5,5.5,10.1,3.2c6.6-2.3,3.6,0.7,9.3,1.1c5.7,0.4,5-4.4,10.8-3.9c5.8,0.5,7.7-0.8,7.4,4.3
				c-0.1,1.5,3.2,0.2,2.9,4.2c0.6-8.7,0.3-4.6,1.1-17.4c0.6-9.6,0.5-7.8-7.3-8.3c-7.8-0.5-4.1-7-8-11.5c-3.9-4.4-0.4-7.4-6.9-1.7
				c-6.5,5.7-10.6-12-14-26.2c-3.5-14.2-3-18.5-2.3-28.8c0.7-10.3-5.6-11.8-9.5-16.3h0c-1.2,1.2-2.7,2.6-4.7,4.4
				c-8.1,7.1-12.2-0.8-17.8-1.1c-5.6-0.4-6.1-6.9-11.4-12.9c-5.3-6-6.1-6.2-5.6-14.7c0.1-1.7,0.3-2.5,0.7-2.7l-0.5-1
				c-6.9-7.9-7.4-0.7-11.5,3c-4.1,3.6-5.5,11.1-12.1,7.2c-7.8-4.7-17.1,0.1-16.6-9c0.6-9.2,3.9-7.7,9.7-19.2c4-8-8.7-9-12.8-13.6
				c-5.7-6.5-8.6,10.4-17,6.4c-6.7-3.2-17,20.6-17,20.6C972.7,152.5,970.9,152.4,969.4,152.3L969.4,152.3z" />
				<a href="osaka.html">
					<path id="st1" d="M1088.3,283.6c-4-4,0-11.7-7.8-11.7c-7.8,0-2.4-5.8-8.2-11.6c-5.8-5.8-8.2-12.2-8.2,0c0,12.2-6.5,3.6-10.1,0
					c-3.6-3.6,0-17.6-6.2-11.4s-7.8,0-13.2,0v-0.2c-5.8,0,1.6,17.9,4.7,14.8s14-3.1,8.6,2.3c-5.4,5.4-8.4,6.5-6.9,12.6
					c1.5,6.1,5,9,0,14c-5,5,9,5.1,9,9.9c3.3,3.7,14.1,4.8,8.1,10.1c-6,5.3-12.9,11.4-13.4,19.2c-0.5,7.8-0.4,12.6-4.5,16.3
					c-4.2,3.7-4.4,13.7-10.4,13.3c-6.1-0.4-8,1.3-13.5,6.1c-5.5,4.8-9.9,10.6-2.4,19.1l0.9,0.2c0-0.6,5.2-11.7,7-9.4
					c4.7,6,12-3.6,12-3.6c3.7-8.8,4.2-4.9,7.9-0.8c3.7,4.2,4.1,4.6,6.8-3.5c2.7-8.1,6.1,0.4,10.4,0.7c4.3,0.3,5.1-12.2,13.8-11.7
					c8.7,0.6,8.6,1.8,14.6-3.5c0.9-6.5,7.6-8,9.4-13.7c1.8-5.7-6.8-8-6.3-15.2c0.5-7.2,4.3-5.9,6.4-10c2.1-4.1-5.8-6.5-7.2-12
					c-1.4-5.6-3.1-8.5-0.9-20.4V283.6z" />
				</a>
				<a href="hyogo.html">
					<path id="st1" d="M1049,300.4c-3-3-12.4-3.7-8.1-8c5-5,1.5-7.9,0-14c-1.5-6.1,1.5-7.1,6.9-12.6c5.4-5.4-5.4-5.4-8.6-2.3
					s-10.4-14.8-4.7-14.8c0,0,9.4-9.4,3.1-15.6c-6.2-6.2-7.8,0-12.7,0c-4.9,0-3.7-3.7-8.4-3.7s-6.3-6.3-11.9-11.9s0-8.9-6.4-2.5
					c-6.4,6.4-7.3-1.6-11.2-1.6c-3.9,0-18.7-1.4-12.8-7.2c5.8-5.8,4-16.4,7.7-12.6c3.8,3.8,12.1,1.4,12.1-5.8c0-7.2,8.9,2.9,0-9.6
					s-6.2-2.6-13.2,0c-7,2.6-6.3-2.6-11-7.2c-4.6-4.6-5.6-13.6-0.5-18.7l0,0c-3.3-0.2-5.5-0.4-8.5-0.5c-4.3-0.3-3.6-11.3-9.5-6.1
					c-5.9,5.1-9.6,4.9-13.1,4.7c-3.5-0.2-4.3-0.3-8.7-0.6c-4.3-0.3-4.8,6.7-8,3c-3.2-3.7-6-7.8-13.9-0.9c-7.9,6.9-7.9,6.9-7.9,6.9
					s6.1,6.3,5.6,14.9c-0.5,8.5,0.1,15.7,6,16c6,0.4,5.7,5.5,5.2,12.4c-0.4,6.9,6.8,12.5,1.5,17.2c-5.3,4.6-1,9.7-10.4,9.1
					c-9.4-0.6-4.3,5.1-9.7,4.8c5,5.7,2.6,0.2,2,9.7c-0.6,9.6-19,30.6-12.9,37.5c6.1,6.9,3.2,24.2,11,33c6.5-5.7,9.9-5.5,13.4-5.2
					c3.5,0.2,8.4-9,13.6-8.7c5.2,0.3,10.4,0.7,15-3.4c4.6-4.1,8.4-9,13.3-3.5c4.9,5.5,10.4,3.5,9.9,11.2c-0.5,7.7,1.9,3.1,6.3,8.1
					c4.5,5.1,0.8,1.4,8.2,1.8c7.4,0.5,17.3,2,21,6.1c0,0,6.5-6.6,12.6-6.2c6.1,0.4,9.8-2.9,13.5-6.1c3.7-3.2,6.3-3.1,12.4-2.7
					c6.1,0.4,9.1-6.4,12.4-2.7L1049,300.4z" />
				</a>

				<a href="osaka.html">
						<path id="st2" d="M1077.3,287.1c-9.2,0-16.6,7.5-16.6,16.6c0,11.2,12.3,25.8,15.8,29.6c0.5,0.5,1.3,0.5,1.8,0
									c3.4-3.9,15.8-18.5,15.8-29.6C1093.9,294.5,1086.5,287.1,1077.3,287.1z M1077.3,311.2c-4.1,0-7.4-3.3-7.4-7.4
									c0-4.1,3.3-7.4,7.4-7.4c4.1,0,7.4,3.3,7.4,7.4C1084.7,307.9,1081.4,311.2,1077.3,311.2z" />
				</a>
				<a href="hyogo.html">
					<path id="st2" d="M952.8,200.6c-9.2,0-16.6,7.5-16.6,16.6c0,11.2,12.3,25.8,15.8,29.6c0.5,0.5,1.3,0.5,1.8,0
								c3.5-3.9,15.8-18.5,15.8-29.6C969.4,208.1,962,200.6,952.8,200.6z M952.8,224.7c-4.1,0-7.4-3.3-7.4-7.4c0-4.1,3.3-7.4,7.4-7.4
								c4.1,0,7.4,3.3,7.4,7.4C960.2,221.4,956.9,224.7,952.8,224.7z" />
				</a>
				<a href="hiroshima.html">
					<path id="st2" d="M699.4,303.1c-9.2,0-16.6,7.5-16.6,16.6c0,11.2,12.3,25.8,15.8,29.6c0.5,0.5,1.3,0.5,1.8,0
								c3.5-3.9,15.8-18.5,15.8-29.6C716.1,310.6,708.6,303.1,699.4,303.1z M699.4,327.3c-4.1,0-7.4-3.3-7.4-7.4c0-4.1,3.3-7.4,7.4-7.4
								c4.1,0,7.4,3.3,7.4,7.4C706.9,323.9,703.5,327.3,699.4,327.3z" />
				</a>
				<a href="fukuoka.html">
					<path id="st2" d="M390.3,489.8c-9.2,0-16.6,7.5-16.6,16.6c0,11.2,12.3,25.8,15.8,29.6c0.5,0.5,1.3,0.5,1.8,0
								c3.5-3.9,15.8-18.5,15.8-29.6C406.9,497.2,399.5,489.8,390.3,489.8z M390.3,513.9c-4.1,0-7.4-3.3-7.4-7.4c0-4.1,3.3-7.4,7.4-7.4
								c4.1,0,7.4,3.3,7.4,7.4C397.7,510.6,394.4,513.9,390.3,513.9z" />
				</a>
			</g>
		</svg>
	</div>
</body>

</html>

CSS

@charset "UTF-8";

.carte path {
  fill: #333;
  cursor: pointer;
}

.carte path:hover {
  fill: #666;
  filter: url(#drop-shadow);
}

.carte path:active {
  fill: #777
}

.svg-container {
  position: relative;
  aspect-ratio: 3 / 4;
}

.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#st1 {
  fill: blue;
  cursor: pointer;
}

#st1:hover {
  fill: #3a26d0;
  filter: url(#drop-shadow);
}

#st1:active {
  fill: blue;
}

#st2 {
  fill: #ff000d;
}

#st2{
  transition-property: transform;
}

#st2:hover {
  animation: bounce 1.5s ease-in-out;
}

@keyframes bounce {
  0% {
    transform: translate(0, 0);
  }

  16.6% {
    transform: translate(0, -20px);
    animation-timing-function: ease-in;
  }

  33.3% {
    transform: translate(0, 0);
  }

  49.8% {
    transform: translate(0, -14px);
    animation-timing-function: ease-in;
  }

  66.4% {
    transition-property: transform;
    transform: translate(0, 0);
  }

  83% {
    transition-property: transform;
    transform: translate(0, -4px);
    animation-timing-function: ease-in;
  }

  100% {
    transition-property: transform;
    transform: translate(0, 0);
  }
}

サンプルイメージ
Qiita記事1.JPG

svg viewBox="x, y, width, height"の意味

内容
x 左からのx座標の位置
y 上からのy座標の位置
width ビューポートの幅
height ビューポートの高さ

今回参考にさせていただいたのはこの記事です。
SVGの描画領域
https://qiita.com/takeshisakuma/items/a6a06902e955acad5c99

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0