在SVG中定义圆/圆弧动画

Question

有谁知道如何在SVG中定义动画圆弧/圆弧,这样圆弧从0度开始到360度结束？

Answer 1

你可以使用path的lineto"手动"绘制它并计算弧的位置:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
   viewBox="0 0 1200 800"
   preserveAspectRatio="xMidYMid"
   style="width:100%; height:100%; position:absolute; top:0; left:0;"
   onload="drawCircle();"> 
  <script> 
    function drawCircle() {
        var i = 0;
        var circle = document.getElementById("arc");
        var angle = 0;
        var radius = 100;     
        window.timer = window.setInterval(
        function() {
            angle -=5;  
            angle %= 360;
            var radians= (angle/180) * Math.PI;
            var x = 200 + Math.cos(radians) * radius;
            var y = 200 + Math.sin(radians) * radius;
            var e = circle.getAttribute("d");
            if(i==0) {
                var d = e+ " M "+x + " " + y;
            }
            else {
                var d = e+ " L "+x + " " + y;
            }
            if (angle === -5 && i !== 0) {
                window.clearInterval(window.timer);
            }

            circle.setAttribute("d", d);
            i++;
        } 
      ,10)
    }
    </script> 

    <path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>

http://jsfiddle.net/k99jy/138/

Answer 2

一种方法是使用一个圆圈,并为stroke-dashoffset设置动画(你也需要'stroke-dasharray').这里可以看到这种动画的一个例子(不是用圆圈,但是同样的原理适用).

另一个选项是使用路径动画和弧形路径段,用于在路径之间设置动画/变形,请参阅此示例.

Answer 3

您还可以使用 acircle和以下技术手动绘制 SVG ：

1. 给circle一个stroke。
2. 使stroke dashed虚线长度等于圆的周长。
3. 将 偏移stroke等于圆的周长的长度。
4. 动画笔画。

HTML：

<svg width="200" height="200">
  <circle class="path" cx="100" cy="100" r="96" stroke="blue" stroke-width="4" fill="none" />
</svg>

CSS：

circle {
  stroke-dasharray: /* circumference */;
  stroke-dashoffset: /* circumference */;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: /* length at which to stop the animation */;
  }
}

提琴手

来源：https : //css-tricks.com/svg-line-animation-works/