2

我有一个 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)

有谁知道我该怎么做？

4

2 回答 2

1

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

那可能是你的朋友。

https://github.com/yairEO/pathAnimator

于 2013-07-28T23:22:29.043 回答
0

如果您真的想使用 SVG 为 HTML 元素设置动画，那么您可能想看看animateMotionand foreignObject.

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

于 2013-03-29T01:37:55.010 回答