如何动画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>