Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Svg

Svg Path Animation With Jquery

Post a Comment
I'm trying to animate SVG->Path element. It is like a timer, in 10 seconds, it should be zero This is my SVG codes:

Solution 1:

Here's how to do this without using jQuery:

<?xml version="1.0" encoding="UTF-8"?><svgviewBox="0 0 480 360"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><title>Animates a path</title><pathid="arc"d="M0 0"/><script>var circle = document.getElementById("arc"),
            startangle = -90,
            angle = startangle,
            radius = 100,
            cx = 240,
            cy = 180,
            increment = 5; // make this negative to animate counter-clockwisefunctiondrawCircle() {
            var radians = (angle/180) * Math.PI,
                x = cx + Math.cos(radians) * radius,
                y = cy + Math.sin(radians) * radius,
                e = circle.getAttribute("d"),
                d = "";

            if(angle == startangle)
                d = "M "+cx + " " + cy + "L "+x + " " + y;
            else
                d = e + " L "+x + " " + y;

            circle.setAttribute("d", d);

            angle += increment;
            if (Math.abs(angle) > (360+startangle*Math.sign(increment)))
                angle = startangle;

            window.requestAnimationFrame(drawCircle);
        }

        drawCircle();
</script></svg>

See live example.

You may like these posts

Post a Comment for "Svg Path Animation With Jquery"