javascript - 如何为 svg 的整个 "path"元素设置动画？

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

经过一些尝试和错误后，我终于解决了我的问题。下面是相同的代码。

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