Question

我已经阅读了有关svg动画的文档http://www.w3.org/TR/SVG/animate.html，我知道如何为矩形，圆形等设置动画，但是本文档并未包含有关如何为整个svg＆＃34;路径＆＃设置动画的任何信息34;元件。

我正在制作弓箭游戏，我想要制作“＃34; path＆＃34;用户单击按钮时右侧的元素。我只是想知道如何动画整个＆＃34;路径＆＃34;元件??

在下面的代码中，我想要制作第二个＆＃34;路径＆＃34;元素在右边...

<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

经过一些反复试验后，我终于解决了我的问题.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>

如何动画整个＆＃34;路径＆＃34; svg的元素？

1 个答案: