SVG动画如何多次为stroke-dasharray制作动画？

Question

这里我有一个立方体的svg代码。我想立方体绘制它自己所以我使用属性 stroke-dasharray stroke-dashoffset＆amp; @keyframes 。它工作得很好。 但是我怎么能再次使用stroke-dasharray属性，以便在绘制立方体之后它变成虚线。 通过虚线我的意思是立方体的笔划线是虚线（在立方体绘制之后）。 还有什么方法可以在笔画中使用渐变色。 Thnx :)

＆＃13;

＆＃13;

path{
	fill:none;
	stroke:#000;
	stroke-width:5.3583231;
	stroke-linecap:butt;
	stroke-linejoin:round;
	stroke-miterlimit:4;
	stroke-opacity:1;
	
}

#path1, #path2{
	stroke-dasharray: 250;
	stroke-dashoffset: 250;
	animation: dash 3s linear forwards;
	animation-delay: 1s;
}

#path3, #path4, #path5, #path6{
	stroke-dasharray: 30;
	stroke-dashoffset: 30;
	animation: dash 1.5s linear forwards;
	animation-delay: 4.2s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }

}

＆＃13;

<svg
   
   width="100px"
   height="100px"
   viewBox="0 0 100 100"
   id="SVGRoot"
   >

  <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">
    <path
       d="M 3.2591993,33.714927 50.169441,65.506007 96.63155,33.70475 50.184339,2.8402629 Z"
       id="path1" class="effect"
       />
    <path
       d="M 50.186433,97.029056 96.631513,65.270332 50.169441,33.815733 3.2620141,65.545471 Z"
       id="path2" class="effect"
        />
    <path
       d="m 3.2591993,33.714927 0.00299,31.830544"
       id="path3" class="effect"
        />
    <path
       d="m 50.169441,65.506007 0.01697,31.523049"
       id="path4" class="effect"
        />
    <path
       d="m 96.63155,33.70475 -3.7e-5,31.565582"
       id="path5" class="effect"
        />
    <path
       d="M 50.184339,2.8402629 50.16944,33.815733"
       id="path6" class="effect"
        />
  </g>
</svg>

＆＃13;

＆＃13;

＆＃13;