svg hover demo

by Stalk

HTML

<svg viewBox="0 0 300 300" width="300">
  <path id="foo" d="M14 133 L18 106 L72 61 L128 105 L130 131 L72 88 Z" />
</svg>

CSS

svg #foo {
  fill: yellow;
  opacity: 0.2;
}
svg #foo:hover {
  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

console.clear()
document.querySelector('svg').addEventListener('click', function(evt){
  console.log('L' + evt.offsetX + ' ' + evt.offsetY)
})