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'）。可以看到这种动画的一个例子（不是用圆圈，但同样的原则适用）here。

另一个选项是使用路径动画，arc path segments用于在路径之间设置动画/变形，请参阅此example。

Answer 3

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

授予circle一个stroke。
让stroke dashed的短划线长度等于圆周长。
将stroke偏移等于圆周长度。
为中风设置动画。

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 */;
  }
}

jsfiddle

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

Answer 4

或许您可以发现预先绘制的圆圈以达到所需的效果：

<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>

Answer 5

我也有点失望，不能简单地用百分比或角度制作一个圆弧。

如今，当我需要一个不属于较长路径的弧时，我会使用一个圆圈和strokeDasharray技巧来显示这个圆圈的一部分。

＆＃13;

svg {
  outline: solid;
  height: 100px;
  width: 100px;
}
.arc {
  fill: transparent;
  stroke-width: 5;
  stroke: red;
  stroke-dasharray: 94.24778 219.91149;
}

＆＃13;

<svg viewport="0 0 100 100">
  <circle cx="50" cy="50" r="50" class="arc"></circle>
</svg>

＆＃13;

您可以看到使用Sass进行计算的改进版本here。

Answer 6

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    
</body>
<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() {
        // center point
        var cX = 300,
            cY = 300;
            radius = 300,

            p1 = {x: cX+radius, y: cY},
            p2 = {x: cX-radius, y: cY},

            circle = document.getElementById("arc"),
            angle = 0;

        window.timer = window.setInterval(
            function() {
            angle -= 5;  
            angle %= 360;
            var radians= (angle/180) * Math.PI;
            var x = cX + Math.cos(radians) * radius;
            var y = cY + Math.sin(radians) * radius;

            if (Math.abs(angle) < 180 && angle != 0)
                d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==180?' 0 1 0 ':' 0 0 0 ')+x+' '+y;
            else
                d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ ' 0 1 0 '+p2.x+' '+p2.y +
            ' M ' + p2.x + ',' + p2.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==0?' 0 1 0 ':' 0 0 0 ')+x+' '+y;
            
            circle.setAttribute("d", d);

            if (Math.abs(angle) == 0)
                window.clearInterval(window.timer);
        } 
      ,10)
    }
    </script> 
    <path d="" id="arc" fill="none" stroke="blue" stroke-width="2" />
</svg>
</html>

＆＃13;

Answer 7

感谢您的回答 - 这里有更多关于我为什么要在SVG中为圆圈设置动画的信息：

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

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

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

长期 - 如果我们真的开始使用AJAX / HTML客户端 - 我将不得不重新实施并坚持SVG标准。

在SVG中定义圆/圆弧动画

7 个答案: