1

インライン SVG をアニメーション化する方法は?! パス上でいくつかのアニメーションを実行したいと考えています。いくつかのイベントでの回転のように、複数のパスでの animateMotion もいくつかのイベントによってトリガーされます。

開発サイトへのリンクを含めます: http://www.myradon.net。私は次のことを達成しようとしています。

電源プラグが (「ポートフォリオ」のすぐ上) メス (現在は Web サイトに接続されています) に接続されている場合、太いダッシュがページの上から下まで移動します (現在の視覚化)。これらの破線でパスアニメーションを考えています（したがって、速度はパスの長さに依存し、前のパスが終了したときに開始する必要があります）。破線は、Ajax 呼び出しで jQuery によって挿入された 12 個の SVG です。

誰もこれに対処する方法についていくつかの素晴らしいアイデアを持っていますか? SMIL、Raphael/D3.js (SVG は既に DOM にあります)? 編集：ちなみに、IE8以下は気にしません。

4

1 に答える 1

0

Javascript 駆動のアニメーションは、すべてのブラウザをサポートします。また、d3.js や raphaël などのライブラリを使用すると、非常に簡単に実行できます (両方のライブラリについてオンラインで利用できる例がたくさんあります)。

必要な双方向性に応じて、SVG アニメーション (SMIL) を使用し、FakeSMILe (IE 用) などの js フォールバックを提供できます。グラフィックの大部分が単純なアニメーションで構成されていて、相互作用があまりない場合、この方法はより理にかなっている可能性があります。

于 2013-03-04T10:19:51.280 に答える