带有jQuery的SVG路径动画 [英] SVG Path animation with Jquery

问题描述

我正在尝试设置SVG-> Path元素的动画.

I'm trying to animate SVG->Path element.

这就像一个计时器，在10秒内应该为零

It is like a timer, in 10 seconds, it should be zero

这是我的SVG代码:

<div style="margin:200px">
    <svg width="150" height="150" viewBox="0 0 150 150">
        <path transform="translate(75, 75) scale(1)" fill="rgba(0,0,0,0.6)" d="M 0, 0 V -75 A 75 75 1 1 1 -0.001 -75 Z"></path>
    </svg>
</div>

但是我不知道如何开始使用jQuery动画

But I have no idea how to start to animate it by jQuery

推荐答案

以下是不使用jQuery的方法:

Here's how to do this without using jQuery:

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Animates a path</title>  
    <path id="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-clockwise

        function drawCircle() {
            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>

请参见实时示例.

这篇关于带有jQuery的SVG路径动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！