svg路径描边动画无限

Question

例如，我有一个看起来像圆形的svg路径。 我尝试使用for循环使其动画不止一次。 但它不起作用。 这是我用来为笔画制作动画的javascript。

var loading = function() {

    path = new Array();
    length = new Array();

    path[0] = document.getElementById('loader1');
   length = path[0].getTotalLength();
   path[0].style.transition = path[0].style.WebkitTransition = 'none';

   length[0] = length;
   path[0].style.strokeDasharray = length + ' ' + length;
   path[0].style.strokeDashoffset = length;

   path[0].getBoundingClientRect();
   path[0].style.transition = path[0].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';

   path[0].style.strokeDashoffset = '0';

};

loading();

我想使它像gif ，始终保持动画状态。 如果有人可以帮忙，我将不胜感激！

这是一个示例http://jsfiddle.net/6Lqkc2qs/

Answer 1

过渡只能在两种样式之间进行。 您需要CSS动画而不是过渡效果。

 .container { position:absolute; width:500px; height:500px; top:0; bottom:0; left:0; right:0; margin:auto; } @keyframes changedash { from { stroke-dashoffset: 502.7825622558594px; stroke-dasharray: 502.7825622558594 502.7825622558594; } to { stroke-dashoffset: 0px; stroke-dasharray: 502.7825622558594 502.7825622558594; } } path { animation-duration: 1s; animation-name: changedash; animation-iteration-count: infinite; animation-direction: normal; } 

 <div class="container"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="650px" height="650px" viewBox="0 0 650 650" enable-background="new 0 0 650 650" xml:space="preserve"> <path id="loader1" style="fill:none;stroke:#37c280;stroke-width:2;stroke-miterlimit:10;" d="M364.088,203.794c-15.126,2.056-30.18,9.004-44.175,14.744 c-12.281,5.037-21.834,12.462-30.789,22.188c-24.832,26.97-19.915,68.42,2.081,96.419c28.676,36.505,100.901,36.35,126.027-4.641 c14.806-24.154,17.992-67.197,0.505-90.905c-16.543-22.427-38.719-29.067-62.473-34.865" style="stroke-dasharray: 502.7825622558594 502.7825622558594; stroke-dashoffset: 502.7825622558594px;"/> </svg> </div>