SVG clip-path Hover Effect

jsbin - SVG clip-path Hover Effect

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
</head>
<body>
<svg id="image" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <clipPath id="clip">
      <circle id="circle" cx="200" cy="200" r="0" stroke="#ff0000" />
    </clipPath>
  </defs>
  <g  clip-path="url(#clip)">
    <image xlink:href="http://p1.music.126.net/cUuHbOnvcyFUHm_IDZpTzw==/109951164973245303.jpg?param=400y400" />
  </g>
</svg>
</body>
</html>

*{
  margin: 0;
  padding: 0;
}

svg {
  border: 1px dashed tomato;
  border-radius: 5px;
  cursor: pointer;
}
circle {
  transition: all .3s;
}
svg:hover circle {
  transition: initial;
}

window.onload = function(){
  const imageSvg = document.getElementById("image");
  const circle = document.getElementById("circle");
  imageSvg.addEventListener("mouseover", function(e){
    circle.setAttribute("r", 150);
  })
  imageSvg.addEventListener("mousemove", function(e){
    circle.setAttribute("cx", e.clientX);
    circle.setAttribute("cy", e.clientY);
  });
  imageSvg.addEventListener("mouseout", function(e){
    circle.setAttribute("r", 0);
  })
}