Javascript 如何在每个循环上用不同的颜色重复svg动画？

我有一个svg动画，如下图所示，它重复了3次，但我想每次都画3种不同的颜色。下面是小提琴

---

Fiddle-jsfiddle.net/6fyg1msL/4

这非常简单。只需使用3个不同的关键帧，如下所示：

您的SVG：

<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="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<path class="path1" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M240,260c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
    c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V260z"/>
<path class="path2" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M271,296c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
    c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V296z"/>
<path class="path3" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M306,346c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
    c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V346z"/>
</svg>

---

如果这个答案解决了你的问题，请不要忘记将它标记为解决方案。感谢亲爱的Lynx的回复，但我不是说。。。我希望在第一个循环中所有的颜色都是红色，然后在第二个循环中所有的颜色都是蓝色，在第三个循环中所有的颜色都是绿色。。。等等…然后您必须使用

动画延迟

。这是一个很好的开始：我可以使用jquery，我可以设置var iterationcount=$（'.path'）.css（“动画迭代计数”）；然后循环这个循环，但循环不适合我。如何创建该循环？因此，在每个循环中，我可以更改动画类。

.path1 {
  animation: draw1 8.5s linear 3 forwards;  
}

 @keyframes draw1 {

  0%   
  {
    stroke: #b3s18c;

  }
    25%  {stroke:red;}
    50%  {stroke: blue;}
    75%  {stroke:green;}
    100% {stroke: Yellow;fill:none;stroke-dashoffset:100; }
}

.path2 {
  animation: draw2 8.5s linear 3 forwards;  
}

 @keyframes draw2 {

  0%   
  {
    stroke: #b3s18c;

  }
    25%  {stroke:green;}
    50%  {stroke: yellow;}
    75%  {stroke:red;}
    100% {stroke: blue;fill:none;stroke-dashoffset:100; }
}

.path3 {
  animation: draw3 8.5s linear 3 forwards;  
}

 @keyframes draw3 {

  0%   
  {
    stroke: #b3s18c;

  }
    25%  {stroke:blue;}
    50%  {stroke: green;}
    75%  {stroke:yellow;}
    100% {stroke: red;fill:none;stroke-dashoffset:100; }
}