如何動畫svg的整個「路徑」元素？

Question

我已經閱讀了關於svg動畫的文檔http://www.w3.org/TR/SVG/animate.html，我知道如何動畫矩形，圓等動畫，但是這個文檔沒有包含關於如何動畫整個svg「path」元素的任何信息。

我正在創建弓箭遊戲，當用戶單擊按鈕時，我想將右側的「路徑」元素設置爲右側。我只想知道如何動畫整個「路徑」元素？

在下面的代碼中，我想第二個「路徑」元素動畫的權利......

<svg width="500" height="500"> 
    <path d="M150,150 l0,150 q80,-50 0,-150 M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:black;stroke-width:5;fill:red;"/> 
    <path d="M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:orange;width:5" /> 
</svg> 

Answer 1

一些試錯，我終於解決我issue.Below後是相同的代碼。

<svg width="500" height="500"> 
    <path d="M150,150 l0,150 q80,-50 0,-150 M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:black;stroke-width:5;fill:red;"/> 
    <path d="M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:orange;width:5"> 
     <animateMotion 
      path="M0,0 l300,0" 
      begin="0s" dur="5s" repeatCount="1" 
      /> 
     </path> 
</svg>