<!DOCTYPE html>
<html>
<head>
<style>
#test {
background-color: lightgray;
height: 300px;
width: 300px;
}
.ball {
fill: black;
r: 10px;
}
</style>
</head>
<body>
<svg id="test" />
<script>
function anim() {
const circ = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circ.setAttribute("class", "ball");
circ.setAttribute("cx", 0);
circ.setAttribute("cy", 0);
const anim = document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
anim.setAttribute("attributeName", "transform");
anim.setAttribute("type", "translate");
anim.setAttribute("begin", "indefinite");
anim.setAttribute("from", "0,0");
anim.setAttribute("to", "300,300");
anim.setAttribute("dur", "2s");
anim.setAttribute("repeatCount", "1");
anim.addEventListener("endEvent", (e) => {e.target.parentElement.remove();});
circ.append(anim);
test.append(circ);
anim.beginElement();
}
const test = document.querySelector("#test");
test.addEventListener("mouseenter", anim);
</script>
</body>
</html>
In this example, a ball (SVG circle) is created each time the mouse hovers over the gray square. An animation from the top left to top right is added to the ball and then triggered.
Sometimes, at least in the latest version of Chrome, the ball is created but the animation does not render until the next event triggger. Where am I going wrong?
New contributor
ketchupcoke is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.