通过单击按钮为SVG路径设置DIV元素的动画

时间:2013-03-28 10:54:30

标签: html svg path jquery-animate

我有一条SVG路径:

<path d="M124 442 L124 442 L166 393 L162 332 L200 251 L179 76" stroke="red" stroke-width="2" fill="none" fill-opacity="0.1"></path>

当我点击“下一步按钮”时,我希望DIV元素沿着这条路径移动。

就像:

*startpoint (beginning of the path) + DIV element
*click next-button* + DIV element moves to station 1
*station 1 
*click next-button* + DIV element moves to station 2
*station 2
*click next-button* + DIV element moves to the end of the path
endpoint (end of the path)

有没有人知道我该怎么做?

1 个答案:

答案 0 :(得分:0)

找到了一个非常有用的工具。它被称为路径动画师。

那可能是你的朋友。

https://github.com/yairEO/pathAnimator