JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

width="595.281px" height="841.891px" viewBox="0 0 595.281 841.891" enable-background="new 0 0 595.281 841.891"

xml:space="preserve">

​

<g>
<path class="map01" fill="#A2DDBF" title="Seoul" d="M195.422,214.857l1.932,4.346l-0.966,3.38l4.346,0.966l4.346,2.898l5.795,4.829h4.829

c0,0,4.346-1.449,5.794-1.449c1.449,0,1.932,1.932,1.932,1.932l2.898,2.414h2.896h3.381l4.346-4.346l5.312-3.863

c0,0,1.449-3.38,1.449-4.828c0-1.449,0.483-4.348,0.483-4.348l2.414-3.38l-2.414-0.966h-4.346l-2.898-1.931l0.483-1.932l1.449-3.864

v-3.862l-0.483-3.38c0,0-0.483-2.415-1.449-3.864c-0.966-1.448-3.38-1.931-3.38-1.931l-7.727-0.967l-1.932,3.38l-4.346,3.381

l-5.312-1.449l-2.415,4.829l-2.897,5.312l-7.244-0.482l-5.312-1.449l-4.932,1.345l1.069,1.069l-2.897,5.312l-0.01,0.028l2.424,0.454

L195.422,214.857z"/>
<text id="label_state_pe" class="label_state" x="372" y="15">Pernambuco</text>
</g>

</svg>

CSS

.map01 + text {
  opacity: 0;
}

.map01:hover {
  fill: #ff6600;
}
.map01:hover + text {
  opacity: 1;
}