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.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;
}