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" />
</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"/>
</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" />
</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" />
</a> 
</svg>
</figure>
</div>

CSS

circle:hover, rect:hover {
  opacity: 1;
  }