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" 
    /> 

初始動畫由時間的開始和最後一個動畫的完成重複觸發。