Define a circle / arc animation in SVG

2楼-- · 2019-02-05 02:34

You can also draw the SVG by hand using a circle and the following technique:

Give the circle a stroke.
Make the stroke dashed with a dash length equal to the circle's circumference.
Offset the stroke by a length equal to the circle's circumference.
Animate the 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

source: https://css-tricks.com/svg-line-animation-works/

0人赞添加讨论(0) 举报

forever°为你锁心

3楼-- · 2019-02-05 02:34

I was also a bit disapointed to not be able to simply make an circle's arc with a percent, or an angle.

Nowadays, when I need an arc which is not part of a longer path, I use a circle and strokeDasharray trick to show just a part of this circle.

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

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

You can see an improved version here which use Sass to make the calculations.

0人赞添加讨论(0) 举报

Viruses.

4楼-- · 2019-02-05 02:36

One way is to use a circle, and animate the stroke-dashoffset (you need 'stroke-dasharray' too). An example of such an animation (not with a circle, but the same principle applies) can be seen here.

The other option is to use a path animation, and arc path segments, for animating/morphing between paths see this example.

0人赞添加讨论(0) 举报

姐就是有狂的资本

5楼-- · 2019-02-05 02:48

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

0人赞添加讨论(0) 举报

\"骚年 ilove

6楼-- · 2019-02-05 02:48

Thanks for the answers - here is a little more information regarding why I want to animate a circle in SVG:

We have a server-client application. I plan to generate SVG images to represent charts (pie charts / bar charts) on the server and send the SVG to the clients. We have Java and .NET clients. I will write client-side code to parse and render the SVG images received from the server. I plan to use only a subset of the SVG format - not more than what we need to represent our charts, but animation is a requirement.

Long-term it would be nice to have an ajax client - that will run on browsers without java or .NET runtime. That is why I have chosen the SVG format.

For a short term solution I now think I will add my own element to the SVG, defining an arc using start and sweep angles. Then I can easily define the animation I require by animating the sweep angle, and makes my implementation simple.

Long term - if we really get around to imlpementing an AJAX/HTML client - I will have to re-implement and stick to the SVG standard.

0人赞添加讨论(0) 举报

小情绪 Triste *

7楼-- · 2019-02-05 02:50

you can paint it "by hand" using path's lineto and calculate the position of the arc:

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

0人赞添加讨论(0) 举报

Define a circle / arc animation in SVG

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间