如何为svg的整个“路径”元素设置动画？

Question

I have read this documentation http://www.w3.org/TR/SVG/animate.html about svg animation and i know how to animate rectangle,circle etc,but this document doesn't contains any info on how to animate entire svg "path" element.

I am creating bow and arrow game and i want to animate the "path" element to the right when user clicks on a button. i just want to know how to animate entire "path" element??

In the below code i want to animate second "path" element to the right...

<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

After some trail and error i finally resolve my issue.Below is the code for the same.

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