svg hover demo

by Ayyappan Sakthivadivel

HTML

<a href="#foo">one</a>
<a href="#bar">two</a>
<input type="radio" name="zz" value="#foo"> r1
<input type="radio" name="zz" value="#bar"> r2
<hr>

<svg viewBox="0 0 300 300" width="300" id="svg">
  <path id="foo" d="M14 133 L18 106 L72 61 L128 105 L130 131 L72 88 Z" />
  <path id="bar" d="M9 179 L72 134 L137 177 L139 210 L72 173 L5 212 Z" />
</svg>

CSS

svg path {
  fill: yellow;
  opacity: 0.2;
}
svg path:hover,
svg .hilight {
  fill: orange;
  opacity: 0.5;
  transform: scale(1.05);
  transition: all 1s linear;

}
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')
  )
})

document.querySelectorAll('svg path').forEach(
  el => el.addEventListener('click', function(){
    document.querySelector(`input[value="#${this.id}"]`).checked = true
  })
)