🗺️
React で地図から都道府県を選択できるようにする(その２)
はじめに
以下の続きです。
都道府県名が表示されてない
前回の記事で、地図から各都道府県を選択できるようになりましたが、実際に使うとなると都道府県名が表示されてないのでつかえません。
そこで、都道府県名を追加します。
最後に追加で、画面の中央に表示します。
都道府県名をSVGの中にいれる
SVGを描画している部分の最後に、新たなグループを追加して、都道府県を描画させます。
場所は、クラス名がsvg-mapとなっているグループの次に新たなグループを追加しました。
src/components/prefecture-selector.tsx
"use client";
const PREFECTURE_DEFAULT_COLOR = "#5fd35f";
const PREFECTURE_ACTIVE_COLOR = "red";
const PREFECTURE_HOVER_COLOR = "#2ca02c";
const FONT_COLOR = "#808080";
const PrefectureSelector = (props: { prefectureCode: string | null, setPrefectureCode: (value: string) => void }) => {
const handleClick = (event: React.MouseEvent<SVGElement, MouseEvent>) => {
let target = event.target as HTMLElement;
// 親要素を探索して `data-code` を持つ要素を見つける
while (target && !target.getAttribute("data-code")) {
target = target.parentElement as HTMLElement;
}
const prefectureCode = target?.getAttribute("data-code");
if (prefectureCode) {
props.setPrefectureCode(prefectureCode);
}
};
return (
<svg
className="geolonia-svg-map"
viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg"
onClick={handleClick}
>
<style>
{`
text {
font-weight: bold;
font-family: "Kosugi Maru", "Zen Maru Gothic", "Noto Sans JP", sans-serif;
stroke-mode: outside;
fill: ${FONT_COLOR};
}
path {
stroke: #165016;
stroke-width: 1;
transition-duration: 200ms;
cursor: pointer;
}
path:hover {
fill: ${PREFECTURE_HOVER_COLOR};
}
`}
</style>
<g className="svg-map">
<g className="prefectures">
<g className="okinawa kyusyu-okinawa prefecture" data-code="47">
<title>沖縄 / Okinawa</title>
<g fill={props.prefectureCode === "47" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M144.9,456.4c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H144.9z"/>
</g>
</g>
<g className="kagoshima kyusyu kyusyu-okinawa prefecture" data-code="46">
<title>鹿児島 / Kagoshima</title>
<g fill={props.prefectureCode === "46" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M99.3,912.7c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H99.3z"/>
</g>
</g>
<g className="miyazaki kyusyu kyusyu-okinawa prefecture" data-code="45">
<title>宮崎 / Miyazaki</title>
<g fill={props.prefectureCode === "45" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M167.8,821.5c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
</g>
</g>
<g className="oita kyusyu kyusyu-okinawa prefecture" data-code="44">
<title>大分 / Oita</title>
<g fill={props.prefectureCode === "44" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M167.8,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H167.8z"/>
</g>
</g>
<g className="kumamoto kyusyu kyusyu-okinawa prefecture" data-code="43">
<title>熊本 / kumamoto</title>
<g fill={props.prefectureCode === "43" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M99.3,730.2c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H99.3z"/>
</g>
</g>
<g className="nagasaki kyusyu kyusyu-okinawa prefecture" data-code="42">
<title>長崎 / Nagasaki</title>
<g fill={props.prefectureCode === "42" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M8,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H8z"/>
</g>
</g>
<g className="saga kyusyu kyusyu-okinawa prefecture" data-code="41">
<title>佐賀 / Saga</title>
<g fill={props.prefectureCode === "41" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M53.7,638.9c-4.4,0-8,3.6-8,8v94c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-94c0-4.4-3.6-8-8-8H53.7z"/>
</g>
</g>
<g className="fukuoka kyusyu kyusyu-okinawa prefecture" data-code="40">
<title>福岡 / Fukuoka</title>
<g fill={props.prefectureCode === "40" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M99.3,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h116.8c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H99.3z"/>
</g>
</g>
<g className="kochi shikoku prefecture" data-code="39">
<title>高知 / Kochi</title>
<g fill={props.prefectureCode === "39" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M281.9,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
</g>
</g>
<g className="ehime sikoku prefecture" data-code="38">
<title>愛媛 / Ehime</title>
<g fill={props.prefectureCode === "38" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M281.9,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H353c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H281.9z"/>
</g>
</g>
<g className="kagawa shikoku prefecture" data-code="37">
<title>香川 / Kagawa</title>
<g fill={props.prefectureCode === "37" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M373.1,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
</g>
</g>
<g className="tokushima shikoku prefecture" data-code="36">
<title>徳島 / Tokushima</title>
<g fill={props.prefectureCode === "36" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M373.1,935.6c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H373.1z"/>
</g>
</g>
<g className="yamaguchi chugoku prefecture" data-code="35">
<title>山口 / Yamaguchi</title>
<g fill={props.prefectureCode === "35" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M281.9,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H281.9z"/>
</g>
</g>
<g className="hiroshima chugoku prefecture" data-code="34">
<title>広島 / Hiroshima</title>
<g fill={props.prefectureCode === "34" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M327.5,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H327.5z"/>
</g>
</g>
<g className="okayama chugoku prefecture" data-code="33">
<title>岡山 / Okayama</title>
<g fill={props.prefectureCode === "33" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M395.9,730.2c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H395.9z"/>
</g>
</g>
<g className="shimane chugoku prefecture" data-code="32">
<title>島根 / Shimane</title>
<g fill={props.prefectureCode === "32" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M327.5,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H327.5z"/>
</g>
</g>
<g className="tottori chugoku prefecture" data-code="31">
<title>鳥取 / Tottori</title>
<g fill={props.prefectureCode === "31" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M395.9,638.9c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H395.9z"/>
</g>
</g>
<g className="wakayama kinki prefecture" data-code="30">
<title>和歌山 / Wakayama</title>
<g fill={props.prefectureCode === "30" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M510,958.4c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-25.6c0-4.4-3.6-8-8-8H510z"/>
</g>
</g>
<g className="nara kinki prefecture" data-code="29">
<title>奈良 / Nara</title>
<g fill={props.prefectureCode === "29" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M555.7,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H555.7z"/>
</g>
</g>
<g className="hyogo kinki prefecture" data-code="28">
<title>兵庫 / Hyogo</title>
<g fill={props.prefectureCode === "28" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M441.6,638.9c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8H490c4.4,0,8-3.6,8-8V647c0-4.4-3.6-8-8-8H441.6z"/>
</g>
</g>
<g className="osaka kinki prefecture" data-code="27">
<title>大阪 / Osaka</title>
<g fill={props.prefectureCode === "27" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M510,775.8c-4.4,0-8,3.6-8,8v162.5c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H510z"/>
</g>
</g>
<g className="kyoto kinki prefecture" data-code="26">
<title>京都 / Kyoto</title>
<g fill={props.prefectureCode === "26" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M510,638.9c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-6.6,0-12-5.4-12-12
V647c0-4.4-3.6-8-8-8H510z"/>
</g>
</g>
<g className="shiga kinki prefecture" data-code="25">
<title>滋賀 / Shiga</title>
<g fill={props.prefectureCode === "25" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M601.3,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H601.3z"/>
</g>
</g>
<g className="mie kinki prefecture" data-code="24">
<title>三重 / Mie</title>
<g fill={props.prefectureCode === "24" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M601.3,775.8c-4.4,0-8,3.6-8,8V992c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V783.9c0-4.4-3.6-8-8-8H601.3z"/>
</g>
</g>
<g className="aichi chubu prefecture" data-code="23">
<title>愛知 / Aichi</title>
<g fill={props.prefectureCode === "23" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M647,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H647z"/>
</g>
</g>
<g className="shizuoka chubu prefecture" data-code="22">
<title>静岡 / Shizuoka</title>
<g fill={props.prefectureCode === "22" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M738.2,867.1c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H738.2z"/>
</g>
</g>
<g className="gifu chubu prefecture" data-code="21">
<title>岐阜 / Gifu</title>
<g fill={props.prefectureCode === "21" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M647,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H647z"/>
</g>
</g>
<g className="nagano chubu prefecture" data-code="20">
<title>長野 / Nagano</title>
<g fill={props.prefectureCode === "20" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M715.4,593.3c-4.4,0-8,3.6-8,8v253.7c0,4.4,3.6,8,8,8H741c4.4,0,8-3.6,8-8v-71.2c0-6.6,5.4-12,12-12h2.7c4.4,0,8-3.6,8-8
V601.3c0-4.4-3.6-8-8-8H715.4z"/>
</g>
</g>
<g className="yamanashi chubu prefecture" data-code="19">
<title>山梨 / Yamanashi</title>
<g fill={props.prefectureCode === "19" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M761,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H761z"/>
</g>
</g>
<g className="fukui chubu prefecture" data-code="18">
<title>福井 / Fukui</title>
<g fill={props.prefectureCode === "18" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M555.7,638.9c-4.4,0-8,3.6-8,8v25.6c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8
v25.6c0,6.6-5.4,12-12,12H555.7z"/>
</g>
</g>
<g className="ishikawa chubu prefecture" data-code="17">
<title>石川 / Ishikawa</title>
<g fill={props.prefectureCode === "17" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M601.3,433.6c-4.4,0-8,3.6-8,8v139.6c0,4.4,3.6,8,8,8h25.6c4.4,0,8-3.6,8-8V441.6c0-4.4-3.6-8-8-8H601.3z"/>
</g>
</g>
<g className="toyama chubu prefecture" data-code="16">
<title>富山 / Toyama</title>
<g fill={props.prefectureCode === "16" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M647,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V510c0-4.4-3.6-8-8-8H647z"/>
</g>
</g>
<g className="niigata chubu prefecture" data-code="15">
<title>新潟 / Niigata</title>
<g fill={props.prefectureCode === "15" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M738.2,502c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h71.2c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8h-25.6c-4.4,0-8,3.6-8,8V490
c0,6.6-5.4,12-12,12H738.2z"/>
</g>
</g>
<g className="kanagawa kanto prefecture" data-code="14">
<title>神奈川 / Kanagawa</title>
<g fill={props.prefectureCode === "14" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M829.5,867.1c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
</g>
</g>
<g className="tokyo kanto prefecture" data-code="13">
<title>東京 / Tokyo</title>
<g fill={props.prefectureCode === "13" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M829.5,775.8c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-2.7c0-6.6,5.4-12,12-12h25.6c4.4,0,8-3.6,8-8
v-48.4c0-4.4-3.6-8-8-8H829.5z"/>
</g>
</g>
<g className="chiba kanto prefecture" data-code="12">
<title>千葉 / Chiba</title>
<g fill={props.prefectureCode === "12" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M943.6,730.2c-4.4,0-8,3.6-8,8v208.1c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V738.2c0-4.4-3.6-8-8-8H943.6z"/>
</g>
</g>
<g className="saitama kanto prefecture" data-code="11">
<title>埼玉 / Saitama</title>
<g fill={props.prefectureCode === "11" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M783.9,684.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h139.6c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
</g>
</g>
<g className="gunma kanto prefecture" data-code="10">
<title>群馬 / Gunma</title>
<g fill={props.prefectureCode === "10" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M783.9,593.3c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8H848c1.5,0,3.7-3.1,3.7-8v-71.2c0-4.9-2.2-8-3.7-8H783.9z"/>
</g>
</g>
<g className="tochigi kanto prefecture" data-code="09">
<title>栃木 / Tochigi</title>
<g fill={props.prefectureCode === "09" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M859.4,593.3c-1.5,0-3.7,3.1-3.7,8v71.2c0,4.9,2.2,8,3.7,8h64.1c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H859.4z"/>
</g>
</g>
<g className="ibaraki kanto prefecture" data-code="08">
<title>茨城 / Ibaraki</title>
<g fill={props.prefectureCode === "08" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M943.6,593.3c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V601.3c0-4.4-3.6-8-8-8H943.6z"/>
</g>
</g>
<g className="fukushima tohoku prefecture" data-code="07">
<title>福島 / Fukushima</title>
<g fill={props.prefectureCode === "07" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M829.5,456.4c-4.4,0-8,3.6-8,8v116.8c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8V464.4c0-4.4-3.6-8-8-8H829.5z"/>
</g>
</g>
<g className="yamagata tohoku prefecture" data-code="06">
<title>山形 / Yamagata</title>
<g fill={props.prefectureCode === "06" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M783.9,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
</g>
</g>
<g className="akita tohoku prefecture" data-code="05">
<title>秋田 / Akita</title>
<g fill={props.prefectureCode === "05" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M783.9,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H783.9z"/>
</g>
</g>
<g className="miyagi tohoku prefecture" data-code="04">
<title>宮城 / Miyagi</title>
<g fill={props.prefectureCode === "04" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M898,387.9c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H898z"/>
</g>
</g>
<g className="iwate tohoku prefecture" data-code="03">
<title>岩手 / Iwate</title>
<g fill={props.prefectureCode === "03" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M898,296.6c-4.4,0-8,3.6-8,8v71.2c0,4.4,3.6,8,8,8h94c4.4,0,8-3.6,8-8v-71.2c0-4.4-3.6-8-8-8H898z"/>
</g>
</g>
<g className="aomori tohoku prefecture" data-code="02">
<title>青森 / Aomori</title>
<g fill={props.prefectureCode === "02" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M783.9,228.2c-4.4,0-8,3.6-8,8v48.4c0,4.4,3.6,8,8,8H992c4.4,0,8-3.6,8-8v-48.4c0-4.4-3.6-8-8-8H783.9z"/>
</g>
</g>
<g className="hokkaido prefecture" data-code="01">
<title>北海道 / Hokkaido</title>
<g fill={props.prefectureCode === "01" ? PREFECTURE_ACTIVE_COLOR : PREFECTURE_DEFAULT_COLOR} >
<path d="M783.9,0c-4.4,0-8,3.6-8,8v185.3c0,4.4,3.6,8,8,8h48.4c4.4,0,8-3.6,8-8v-25.6c0-6.6,5.4-12,12-12H992c4.4,0,8-3.6,8-8V8
c0-4.4-3.6-8-8-8H783.9z"/>
</g>
</g>
</g>
<g className="boundary-line" stroke="#EEEEEE" strokeWidth="12" strokeLinejoin="round">
<path d="M216.1,593.3H89.3c-1.1,0-2-0.9-2-2s0.9-2,2-2h126.9c4.4,0,8-3.6,8-8V454.4c0-1.1,0.9-2,2-2s2,0.9,2,2v126.9
C228.2,587.9,222.8,593.3,216.1,593.3z"/>
</g>
</g>
<g>
<text x="850" y="65">北海道</text>
<text x="845" y="265">青森</text>
<text x="898" y="320">岩手</text>
<text x="898" y="410">宮城</text>
<text x="790" y="320">秋田</text>
<text x="790" y="410">山形</text>
<text x="840" y="480">福島</text>
<text x="940" y="620">茨城</text>
<text x="860" y="620">栃木</text>
<text x="780" y="620">群馬</text>
<text x="780" y="712">埼玉</text>
<text x="940" y="805">千葉</text>
<text x="830" y="805">東京</text>
<text x="830" y="888">神奈川</text>
<text x="740" y="525">新潟</text>
<text x="650" y="525">富山</text>
<text x="598" y="525">石川</text>
<text x="560" y="665">福井</text>
<text x="760" y="805">山梨</text>
<text x="720" y="620">長野</text>
<text x="655" y="620">岐阜</text>
<text x="742" y="888">静岡</text>
<text x="655" y="888">愛知</text>
<text x="598" y="888">三重</text>
<text x="598" y="712">滋賀</text>
<text x="520" y="712">京都</text>
<text x="506" y="805">大阪</text>
<text x="448" y="712">兵庫</text>
<text x="552" y="805">奈良</text>
<text x="522" y="978">和歌山</text>
<text x="392" y="670">島根</text>
<text x="332" y="670">島根</text>
<text x="392" y="800">岡山</text>
<text x="327" y="800">広島</text>
<text x="275" y="680">山口</text>
<text x="373" y="975">徳島</text>
<text x="373" y="903">香川</text>
<text x="287" y="903">愛媛</text>
<text x="287" y="975">高知</text>
<text x="99" y="680">福岡</text>
<text x="50" y="680">佐賀</text>
<text x="4" y="680">長崎</text>
<text x="99" y="800">熊本</text>
<text x="167" y="800">大分</text>
<text x="167" y="850">宮崎</text>
<text x="99" y="930">鹿児島</text>
<text x="140" y="490">沖縄</text>
</g>
</svg>
);
}
export default PrefectureSelector;
SVGには、z-indexみたいなものはないので、重なりがあった場合は、先に記述したものは後で記述されたもので上書きされてしまうようです。
もし、都道府県名が描画される位置を変えたかったら、textタグの属性xとyの値を変更することで実現できます。
画面の中央に表示
呼び出し側でコントロールできます。
Tailwind CSS を使用しているのであれば、呼び出し側で以下のようにすれが画面の中央に画面に収まるように表示されます。
src/app/page.tsx
"use client";
import { useState } from "react";
import PrefectureSelector from "@/components/prefecture-selector";
export default function Home() {
const [prefectureCode, setPrefectureCode] = useState<string | null>(null);
return (
<div className="flex items-center justify-center">
<div className="h-screen aspect-square">
<PrefectureSelector
prefectureCode={prefectureCode}
setPrefectureCode={setPrefectureCode}
/>
</div>
</div>
);
}
Discussion