通过点击一个按钮

Question

动画沿着SVG路径DIV元素我有一个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) 

有没有人有一个想法，我怎么能做到这一点？

Answer 1

如果您确实想要使用SVG为HTML元素设置动画效果，那么您可能需要查看animateMotion和foreignObject。

但是，在您的情况下，这可能不是理想和最广泛支持的解决方案。为什么不使用“传统”JavaScript方式，将style属性设置为动画效果？只要你的路径限于简单的直线段，这应该不会太难。

Answer 2

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

这可能是你的朋友。 [动画沿SVG路径一个div]的

https://github.com/yairEO/pathAnimator