Как анимировать весь элемент «пути» svg?

Question

Я прочитал эту документацию http://www.w3.org/TR/SVG/animate.html о анимации svg, и я знаю, как анимировать прямоугольник, круг и т. Д., Но этот документ не содержит информации о том, как анимировать весь элемент «путь» svg.

Я создаю игру лука и стрелы, и я хочу анимировать элемент «путь» справа, когда пользователь нажимает кнопку. я просто хочу знать, как оживить весь элемент «путь»?

В приведенном ниже коды я хочу, чтобы анимировать второй элемент «путь» справа ...

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