<!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 trigger. Where am I going wrong?