OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Dynamically added SVG animation sometimes not firing

  • Thread starter Thread starter ketchupcoke
  • Start date Start date
K

ketchupcoke

Guest
Code:
<!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?

<pre><code><!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>
</code></pre>
<p>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.</p>
<p>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?</p>
 

Latest posts

J
Replies
0
Views
1
Jeff P Chacko
J
Top