svg动画点脉冲

Question

即时通讯试图做脉冲SVG动画。你可以在这里看到：

http://jsfiddle.net/z2Cm9/

<g transform="translate(0,0)"> 
    <polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="9.5,9.583 24.5,36 39.5,9.75"/> 

    <animateMotion path="M 0,0 0,10 z" fill="freeze" dur="1s" repeatCount="indefinite"></animateMotion> 
</g> 

<g> 
    <polyline fill="none" stroke="#000000" stroke-miterlimit="10" points="0,48.5 24.75,48.5 50,48.5 " > 

     <animate 
     id="animation1" 
     attributeName="points" 
     from="0,48.5 24.75,48.5 50,48.5" 
     to="20,48.5 24.75,48.5 30,48.5" 
     dur="0.5s" 
     /> 

     <animate 
     id="animation2" 
     attributeName="points" 
     from="20,48.5 24.75,48.5 30,48.5" 
     to="0,48.5 24.75,48.5 50,48.5" 
     begin="animation1.end" 
     dur="0.5s" 
     /> 

     <animate 
     id="animation3" 
     attributeName="points" 
     from="0,48.5 24.75,48.5 50,48.5" 
     to="20,48.5 24.75,48.5 30,48.5" 
     begin="animation2.end" 
     dur="0.5s" 
     /> 

    </polyline> 


</g> 

正如你可以看到它现在脉动只有一次。我想要重复底部线条的移动。但似乎找不到一个方法来做到这一点很好。例如可以添加更多的一个阶段。像从，到，等等？

希望我这次问的方式正确。

问候！

Answer 1

像这样？

<animate 
     id="animation1" 
     attributeName="points" 
     from="0,48.5 24.75,48.5 50,48.5" 
     to="20,48.5 24.75,48.5 30,48.5" 
     begin="0s;animation3.end;" 
     dur="0.5s" 
    /> 

初始动画由时间的开始和最后一个动画的完成重复触发。