JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<h3>Responsive SVG Image Map</h3>

<figure id="myMap">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"> 
<!--bitmap background image-->
<image width="1200" height="800" xlink:href="https://dummyimage.com/1200x800.jpg"> </image>
<!--outbound link--> 
<a xlink:href="https://google.com"><title>Google.com</title>
<!--vector shape-->
<circle cx="200" cy="200" r="150" fill="#ff0" opacity="0.4" /><text x="200" y="225" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Google]]></text>
</a>
<!--2nd outbound link--> 
<a xlink:href="https://example.com"> 
<title>Example.com</title>
<!--vector shape-->
<rect x="460" y="28" rx="40" fill="#f00" opacity="0.4" width="700" height="250"/><text x="800" y="185" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Example]]></text>
</a> 
<!--3rd outbound link--> 
<a xlink:href="https://yahoo.com"> 
<title>Yahoo.com</title>
<!--vector shape-->
<circle cx="450" cy="620" r="150" fill="#f0f" opacity="0.4" /><text x="450" y="634" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Yahoo]]></text>
</a> 

<!--4th outbound link--> 
<a xlink:href="https://bing.com"> 
<title>Bing.com</title>
<!--vector shape-->
<circle cx="990" cy="475" r="150" fill="#0ff" opacity="0.4" /><text x="990" y="500" font-size="65" fill="#FFF" text-anchor="middle"><![CDATA[Bing]]></text>
</a> 
</svg>
</figure>
</div>

CSS

circle:hover, rect:hover, text:hover {
  opacity: 1;
  fill: #000;
  }