svg hover demo

HTML

<svg viewBox="300 0 900 900" width="300">
  <path id="foo" d="M371 689 L371 583 L516 583 L698 583 L698 520 L506 520 L506 557 L575 557 L575 531 L623 531 L623 567 L494 567 L373 567 L373 343 L471 343 L471 286 L406 286 L406 317 L325 317 L325 508 L420 508 L420 402 L734 402 L880 402 L880 301 L627 301 L462 301 L462 471 L462 451 L462 504 L485 504 L485 44 Z" />
  <path id="bar" d="M309 179 L372 134 L437 177 L439 210 L372 173 L305 212 Z" />
</svg>


<a href="#foo">one</a>
<a href="#bar">two</a>

CSS

svg path {
  fill: yellow;
  opacity: 0.2;
}
svg path:hover,
svg .hilight {
  fill: orange;
  opacity: 0.7;
}
svg {
  border: sol1d 1px tomato;
  background: url(https://static.pexels.com/photos/68631/pexels-photo-68631.jpeg) 100% 100% no-repeat;
  background-size: cover;
}

JavaScript

document.addEventListener('mouseover', function (evt) {
  let target = evt.target
  if (target.tagName === 'A') {
    let id = target.getAttribute('href')
    document.querySelector(id).classList.add('hilight')
  }
})

document.addEventListener('mouseout', function (evt) {
  document.querySelectorAll('.hilight').forEach(
    el => el.classList.remove('hilight')
  )
})