Animation 在SVG中定义圆/圆弧动画

有人知道如何在SVG中定义动画圆弧/圆，使圆弧以0度开始，以360度结束吗？

一种方法是使用圆，并设置动画（您还需要“笔划数组”）。可以看到这样一个动画的示例（不是圆，而是相同的原理）

另一个选项是使用路径动画，对于路径之间的动画/变形，请参见此。

您可以使用路径的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>

函数drawCircle（）{
var i=0；
var circle=document.getElementById（“弧”）；
var角=0；
var半径=100；
window.timer=window.setInterval(
函数（）{
角度-=5；
角度%=360；
var弧度=（角度/180）*Math.PI；
var x=200+数学余弦（弧度）*半径；
变量y=200+数学正弦（弧度）*半径；
var e=circle.getAttribute（“d”）；
如果（i==0）{
变量d=e+“M”+x+“”+y；
}
否则{
变量d=e+“L”+x+“”+y；
}
如果（角度==-5&&i！==0）{
窗口清除间隔（窗口计时器）；
}
圆.setAttribute（“d”，d）；
i++；
} 
,10)
}

---

感谢您的回答-以下是有关我为什么要在SVG中设置圆动画的更多信息：

我们有一个服务器客户端应用程序。我计划在服务器上生成SVG图像来表示图表（饼图/条形图），并将SVG发送给客户端。 我们有Java和.NET客户端。我将编写客户端代码来解析和呈现从服务器接收的SVG图像。 我计划只使用SVG格式的一个子集——不超过表示图表所需的内容，但动画是一项要求

从长远来看，拥有一个ajax客户端会很好，它将在没有java或.NET运行时的浏览器上运行。这就是我选择SVG格式的原因

对于一个短期解决方案，我现在认为我将向SVG添加我自己的元素，使用开始和扫描角度定义一个圆弧。然后，我可以通过设置扫描角度的动画来轻松定义所需的动画，并使我的实现变得简单

---

从长远来看，如果我们真的着手改进AJAX/HTML客户端，我将不得不重新实现并坚持SVG标准。

或者您可以打开一个预先绘制的圆圈，以提供所需的效果：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="400" height="400">
  <rect x="0" y="0" width="1000" height="1000"/>
  <circle cx="500" cy="500" r="500" fill="red"/>
  <rect x="0" y="500" width="1000" height="500"/>
  <rect x="0" y=  "0" width="1000" height="500">
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" fill="freeze" from="0,500,500" to="180,500,500"/>
  </rect>
</svg>

---

我也有点失望，因为我不能简单地用一个百分比或一个角度画一个圆的圆弧

现在，当我需要一个不是较长路径一部分的圆弧时，我使用一个圆和strokeDasharray技巧来显示这个圆的一部分

svg{
轮廓：立体；
高度：100px；
宽度：100px；
}
.arc{
填充：透明；
笔画宽度：5；
笔画：红色；
行程：94.24778219.91149；
}

函数drawCircle（）{
//中心点
变量cX=300，
cY=300；
半径=300，
p1={x:cX+半径，y:cY}，
p2={x:cX半径，y:cY}，
圆圈=document.getElementById（“弧”），
角度=0；
window.timer=window.setInterval(
函数（）{
角度-=5；
角度%=360；
var弧度=（角度/180）*Math.PI；
var x=cX+数学余弦（弧度）*半径；
变量y=cY+数学sin（弧度）*半径；
如果（数学绝对值（角度）<180和角度！=0）
d='M'+p1.x+'、'p1.y+'A'+radius+'、'+radius+（数学绝对值（角度）==180？'0110'：'0100'）+x+''+y；
其他的
d='M'+p1.x+'、'p1.y+'A'+radius+'、'+radius+'0110'+p2.x+'+p2.y+
“M'+p2.x+'，“+p2.y+'A'+radius+'，'+radius+”（数学绝对值（角度）==0？'0110'：'0100'）+x+'+y；
圆.setAttribute（“d”，d）；
如果（数学绝对值（角度）==0）
窗口清除间隔（窗口计时器）；
} 
,10)
}

您还可以使用

圆圈和以下技术手动绘制SVG：

给
圆圈
一个
笔划
使
笔划
虚线
，虚线长度等于圆的周长
将
笔划
偏移等于圆周长的长度
为笔划设置动画
HTML:


来源：
我想设置扫描角度的动画，但在SVG中，圆弧是使用起点和终点定义的。谢谢erik-该网站的链接向我展示了一些关于SVG动画的有趣想法和技术。谢谢räph。我对SVG还是新手，以前从未使用过该元素。我不确定它是否能解决我遇到的具体问题。但由于你的代码片段完美地回答了我的问题，我认为它是正确的。你是为网络编程的吗？这个脚本示例可以在firefox、safari、chrome和opera中使用！作为替代方案，您也可以使用SMIL-但这在所有浏览器中都不起作用-我写了另一个答案来详细解释我的架构-请参见下文，再次感谢您的帮助。好的！我很好奇：关于您的短期解决方案，当您声明自己的svg元素时，您的客户机将如何呈现这些元素？您是否解析xml并以本机方式绘制它们？是的，我将使用本机图形API（java中的Graphics2D，以及.NET中的GDI+）解析xml并绘制元素。您可能应该编辑您的问题，而不是回答它。顺便说一句您可以使用半冲程圆来绘制圆弧；我的答案中的代码笔向你展示了一个动画。揭开圆圈是一个很酷的想法，我喜欢你的半圆例子。
<svg width="200" height="200">
  <circle class="path" cx="100" cy="100" r="96" stroke="blue" stroke-width="4" fill="none" />
</svg>

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

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