問題タブ [svg-animate]

更新されたコード

私のsvgファイルで：

このコードは目的の変換を実現しますが、四角形が回転すると、その一部が表示されません。

長方形が 1 から 3 に拡大縮小されてから 1 に縮小されるアニメーションを試しています。

D3やraphael.jsではなく、純粋なSVGタグでこれを実現したいと考えています。これはどのように達成できますか？私は多くの方法を試しましたが、良い結果が得られませんでした。

新しいデータ ポイントが継続的に供給され、プロットされるリアルタイム グラフを作成しました。

現在、requestAnimationFame() を使用しており、要素の更新された位置を 1 秒あたり 30 回レンダリングしています。

多くの SVG 要素があると、これは少し遅くなる可能性があります。

このような継続的にスクロールするグラフを SVG アニメーション、CSS アニメーション、または CSS トランジションで実装する最も効率的な方法は何ですか? （サードパーティのライブラリなし）。

前もって感謝します。

継続的に受信するリアルタイム (動的) データとチャートへのフィードがある状況をシミュレートしたい

したがって、データ配列を 1 秒ごとに継続的に更新する必要がある一方で、d3 を使用してアニメーション化された折れ線グラフのデモを試みます。

原作はベンクリステンセンにインスパイアされている

そして、これが私の変更されたhtmlソースです：私のソースコード

buffer[100]関数をrandom number for every 1 second呼び出してにデータを入力しようとしましたstartGenerator()

以下はFeedDataToChart()パラメータ名です。

counter新しいデータを再描画するたびに、再描画データ インデックスを確認するためにcounteraを使用し1ます。まで、counter < data.length-1はre-draw timer停止し、 から新しいデータを取得する必要がありますbuffer[100]。

関数を繰り返そうとしたときに問題が発生startGenerator()し、結果は次のように表示 されます。

私はjavascriptにかなり慣れていません。Every からデータを取得し、単一の折れ線グラフを継続的に更新する方法を特定できる人はbufferいますか?1 second

ありがとうございました！

編集ソースを更新すると、問題は最小限に抑えられました: My New Source

.remove()に行を追加してstopTimer()、sgv に保持されたデータを削除し、リセットしてglobal buffer to null、関数を再度呼び出して、startGenerator()タイマーが停止したときに新しいデータを取得します。

今私が抱えている唯一の問題は、新しいグラフが作成されるたびに、前のものの下に新しいsgvパスが作成されることです。新しいグラフは、作成されるたびに下に移動しています。今日更新した新しいソースを確認してください。コードを実行すると、私の説明が表示されます。

sgv パスを更新するたびに同じ場所に固定するにはどうすればよいですか?

SVG にあるいくつかのパスの y 軸間の 3d 回転をエミュレートしようとしています。ライブラリ SVG3D https://code.google.com/p/svg3d/ を見つけて、試してみました。

問題は、ティック間隔の長さと各「ティック」の増分 (ラジアン単位) しか制御できないことです (回転を実行する transform() 関数を呼び出す setInterval タイミング関数があります)。

再生一時停止コマンドのように機能する toggleRotation 関数がありますが、パスのタイミングと回転を制御することはできません。

私のパスには次のサンプルコードがあります。

では、オブジェクトの回転と速度を制御するにはどうすればよいでしょうか? 各回転の速度を制御するためのイージング関数を含めることは可能ですか?

グループにたくさんの SVG サークルがあります。

スクロール効果を出すために、1 秒間に 30 回少しずつ左に移動させたいと思います。

requestAnimationFrame を 1/30 秒間隔で使用し、適用します。

Chrome タイムライン デバッグ ツールでは、この変換属性を設定するとレイアウトが再計算され、非常にコストがかかることがわかります。この記事によると: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/私はそれが起こるはずだとは思わなかった.

このスクロール効果を達成するための最も効率的な方法は何ですか?

前もって感謝します。

内部に画像を含む svg がありますが、これを CSS でアニメーション化できるのでしょうか?

ホバリングすると変形するようにしたのですが、ちょっとジャンプしてて変なエフェクトですが、バウンスエフェクトなどでアニメ化すればもっと自然に見える可能性もあるんじゃないかなと思いました。私は CSS3 アニメーションで行われているのを見てきました。

svg (テキスト文字内の png) 内からこれを行う方法について何かアイデアがありましたか?

このJSFiddleよりも私のサイトの方が見栄えがよく、何らかの理由で少しぼやけています。

SVG コード:

JS やフレームワークはありませんplz

更新だから、SVGのタグを見つけましたが、オブジェクト全体（つまり、三角形、これは私が求めているものではありません.. .)

フィドルは不透明度をアニメーション化しています (あまりうまくいきませんが、完全に不透明になることはありません)。

更新 2 Randak は、私のサイトではぼやけて見えるとコメントで述べています。