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