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 要素をアニメーション化したい場合は、 と を参照しanimateMotionてくださいforeignObject。

ただし、これは、お客様の状況では理想的で最も広くサポートされているソリューションではない可能性があります。スタイル属性をアニメーション化する「従来の」JavaScript の方法を使用しないのはなぜですか? パスが単純な直線セグメントに制限されている限り、これはそれほど難しくありません。

于 2013-03-29T01:37:55.010 に答える