問題タブ [svg-animate]

このグラフィックをSVGで作成したいと思います。タグを使用<animate>でき、JavaScript で SVG ドキュメントを操作できます。可能であれば、すべて SVG で行うことをお勧めします。

d3.js を使用した積み上げ面グラフがあります。window.resize でビジュアライゼーションのサイズを変更して再描画する関数があります。ロジックは、10% のマージンを削除し、ウィンドウ サイズに応じて x/y 軸をスケーリングすることです。

ここで見ることができます：

http://porwal.info/direct/demos/d3graphs/area.html

ウィンドウのサイズがフルサイズに近くない場合、ウィンドウのサイズを変更 (ズームインまたはズームアウト) すると、ロジックが機能します。高さが完全に近い場合、グラフは予想される境界を超えています。たとえば、F11 キーを押して全画面表示にすると、グラフがオーバーフローします。F11だけではありませんが、最大化すると、正常に動作する場合とオーバーフローする場合があります。

関連するjsファイルは

http://porwal.info/direct/demos/d3graphs/js/area.js

また、関連するサイズ変更機能:

(完全なコードは、上記のリンクを提供した js ファイルで確認できます)。

これはおそらく非常に単純ですが、私はsvgを学び始めており、次のコードの動作に混乱しています:

私が期待しているのは、長方形が中心点で円を描くように回転することです。それは何をしますか。

私はそれが道を下ることも期待しています。それは何をしますか。

パスを下ると、回転が止まると思います。それはそうだと思います。

パスの終わりにとどまることを期待しています。それはしません。

スタート地点に戻り、回転を止めました。したがって、リセットが回転を停止したのか、実際の end ステートメントが回転を停止したのかはわかりません。

したがって、私の質問は 2 つあります。なぜリセットされるのか、どうすればそれを防ぐことができるのかということです。

また、優れた svg チュートリアルへのリンクをいただければ幸いです。私は多くのチュートリアルを見つけていますが、これは私の研究からすでに知っているはずの非常に単純な問題だと感じているので、品質を見つけていないと思います.

リセットを防ぐためにパスに何かが必要だと思いますが、何がわかりません。

前もって感謝します。

IE 10 で表示しているかなり複雑な SVG ドキュメントがあります。ビューポートのフルサイズに引き伸ばされ、viewBox属性を使用します。ドキュメント内のレイヤーの変換が非常に遅いことに気付きました (1 fps など)。これは、他のデスクトップ ブラウザでは発生しません。

F12 を使用した JS プロファイリング以外に、変換を遅らせている原因を突き止めるために関連する IE10 で利用可能な他のツールについてアイデアを持っている人はいますか?

animateMotion を使用して移動する円をアニメーション化する .svg ファイルがあります。問題は、ページの下部で jquery を使用してファイルをロードすることです。ユーザーが下にスクロールするまでに、アニメーションは既に再生されています。ビューポートに div があるときに関数を実行するウェイポイント jquery プラグインを使用しています。これを使用して、.svg 内で animateMotion をトリガーしたいと思います。

考えやアイデアは大歓迎です。