JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Обёртка всего блока -->
<div class="animal">

  <!-- SVG-карта поверх всего -->
  <svg class="animal__map" viewBox="0 0 1140 800">

    <!-- Ссылка-обёртка с xlink:href -->
    <a xlink:href="https://www.google.com/">
      <path class="animal__map-part" d="m 457.22244,98.885648 c 32.52252,66.957192 38.73863,153.400622 28.16442,252.281322 l 137.22665,-5.39319 c 5.33727,-80.01803 6.81847,-159.82184 -44.34398,-236.701 z" description-data="<img src='media/2.jpg'> Реберная часть (толстый край) — первосортное мясо, в цельном виде состоит из 13 ребер"></path>
    </a>

    <!-- Ссылка-обёртка с xlink:href -->
    <a xlink:href="https://www.google.com/">
      <path class="animal__map-part" d="m 578.26953,109.07278 c 44.33189,69.33986 54.25203,149.81293 44.34398,236.701 l 152.80698,-0.59924 C 772.7733,261.24635 769.87608,177.39629 717.29391,109.07278 Z" description-data="<img src='media/1.jpg'> Филей (поясничная часть, тонкий край). Этот отруб содержит нежное и очень постное мясо."></path>
    </a>
  </svg>

  <!-- Картинка, которая служит как бы фоном -->
  <img class="animal__map-background" src="https://s8.hostingkartinok.com/uploads/images/2019/10/667cca51ff79a7a05724107534ff1638.jpg" alt="">

</div>

CSS

*,
:before,
:after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/* */

.animal {
  position: relative;
  text-align: center;
  top: 0;
  left: 0;
}

.animal__map {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.animal__map-part {
  fill: #bf2523;
  transition: opacity .3s, fill .3s;
}

.animal__map-part:hover {
  opacity: 0;
}

.animal__map-background {
  position: relative;
  z-index: 1;
}