svg 路径描边动画无限答案

【问题标题】：svg path stroke animation infinitesvg 路径描边动画无限
【发布时间】：2015-11-26 07:30:09
【问题描述】：

例如，我有一个 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/

【问题讨论】：

标签： javascript animation svg

【解决方案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>

【讨论】：

是否可以只向前而不向后设置动画？我发现它动画方向：转发；非常感谢！
当然，这是由动画方向属性控制的。我已经在答案中对其进行了更改，以使其不会倒退。