SVG circle animation

2019-01-20 06:38发布

站内问答 / HTML/CSS
1941 2 4

I am trying to make a circle animation,
I currently have this: http://jsfiddle.net/gf327jxu/1/

<svg width="100" height="100" class="circle">
   <circle cx="50" cy="50" r="40" />
</svg>

css:

.circle{
stroke:green;
stroke-width:10;
fill:none;
}


I want it animated like a circle progress, something like this: http://jsfiddle.net/andsens/mLA7X/ but in SVG,
And I need it to be clockwise, how can I achieve this, and is this even possible?

2条回答
Evening l夕情丶
2楼-- · 2019-01-20 06:58

Here's a fiddle example.

Note: I used r = 57, since the perimeter is 358.1 which is close to 360 degrees. For different r values, you need to calculate the stroke-dasharray

Many thanks to @Robert Longson , @Erik Dahlström and @Phrogz for SO solutions over the years. This fiddle is just one of their tweaks. 

(function() {
  // math trick 2*pi*57 = 358, must be less than 360 degree 
  var circle = document.getElementById('green-halo');
  var myTimer = document.getElementById('myTimer');
  var interval = 30;
  var angle = 0;
  var angle_increment = 6;

  window.timer = window.setInterval(function() {
    circle.setAttribute("stroke-dasharray", angle + ", 20000");
    myTimer.innerHTML = parseInt(angle / 360 * 100) + '%';

    if (angle >= 360) {
      window.clearInterval(window.timer);
    }
    angle += angle_increment;
  }.bind(this), interval);
})()
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
    <circle cx="100" cy="100" r="57" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
    <text id="myTimer" text-anchor="middle" x="100" y="110" style="font-size: 36px;" >0%</text>
</svg>

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
3楼-- · 2019-01-20 07:00 
<!DOCTYPE html>
<html>
    <head>
        <title>svg circle animation</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #XMLID_4_{
                stroke-dasharray: 1000;
                stroke-dashoffset: 2000;
                fill: #FFFFFF;
                stroke: #000000;
            }
            svg:hover #XMLID_4_{
                -webkit-animation: draw 3s forwards;
                animation: draw 3s;
            }
            @keyframes draw{
                from{
                    stroke-dashoffset: 1000;
                    fill:#efefef;
                    stroke:#ff5535;
                }
                to{
                    stroke-dashoffset: 0;   
                }
            }
            @-webkit-keyframes draw{
                from{
                    stroke:#ff5535;
                    stroke-dashoffset: 1000; 
                }
                to{
                    stroke-dashoffset: 0;   
                }
            }
        </style>
    </head>
    <body>
        <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
        <g>
        <circle id="XMLID_4_"  stroke-width="3" stroke-miterlimit="10" cx="366.5" cy="135.6" r="44.7"/>
        </g>
        </svg>
    </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)