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

【问题标题】：How to animate entire "path" element of svg?如何为 svg 的整个“路径”元素设置动画？
【发布时间】：2014-11-22 21:13:39
【问题描述】：

我已阅读此文档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>

【问题讨论】：

“动画”什么的路径？形状？颜色？边界？

标签： javascript jquery css animation svg

【解决方案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>

【讨论】：

没有 SMIL 可以吗？