問題タブ [svg-animate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
320 参照

html - 曲線に点を追加して SVG アニメーションを作成する方法

A0、A1、A2、...、A100 などの一連の点 (2D) があります。

それらのポイントから曲線を描画する方法でそれらのポイントをアニメートしたいので、最初のフレームに曲線が含まれます

A0

(つまり、単一のポイント)、次のフレームには次のポイントがあります

A0,A1

次に、次のフレームで、

A0、A1、A2

など、50フレームで

A0、A1、...、A49

どうやってやるの?ファイルの先頭でポイントを定義し、後で (おそらく配列で) 使用するようにしたいと思います。実際には 2000 個のポイントを使用しているため、手動で定義するのは非常に困難です。

HTML5 プレゼンテーションを準備しているので、これを行っています。

代替案 (ベクター グラフィックス) は大歓迎です。何卒よろしくお願いいたします。

0 投票する
1 に答える
225 参照

javascript - Rectangle SVG Object/Raphael JS の Quickinfo

Rectangle オブジェクトの描画に Raphael JS を使用しています。JS コーディングは実行時に ABAP コーディングに変換され、内部ブラウ​​ザに表示されます。すべてを表示しても問題ありませんが、SVG オブジェクトの上にマウスを移動するときに、特定の Qucikinfo を投稿したいと思います。Rectangle Objects で簡単な情報を投稿する方法を知っている人はいますか? オブジェクトをクリックして情報を表示することもできます。円オブジェクトは使いたくない..

アバプ:

js:

0 投票する
2 に答える
9174 参照

svg - CSSまたはJavaなしでSVGグループを無期限に360度回転させます

SVGに飛び込むのはこれが初めてです。cssまたはjavascript/jqueryなしで、このグループを無期限に360回転させることは可能ですか? これまでのところ、左上隅で回転させていますが、中央に配置する方法がわかりません。

0 投票する
1 に答える
268 参照

javascript - svg.jsを使用して位置をアニメーション化する正しい方法は何ですか?

パスを作成しました(うまく表示されます)。数秒後、これを垂直に上に移動したいだけです。

ドキュメントに従って、パスをアニメーション化できましたが、期待どおりに動きません。パスは右にジャンプし、滑らかな垂直遷移とは反対に斜めに移動します。これが私のコードです:

誰がこれを引き起こしているのか指摘できますか?

私はJSFiddleでもこれを概説しました: http://jsfiddle.net/Dwf3Z/

0 投票する
1 に答える
2688 参照

css - CSS を使用してインフォグラフィック SVG をアニメーション化する (ドーナツ チャート)

「ダッシュボード」ページを作成し、いくつかの図をグラフィカルな方法で表示したいと思います。

私の考えは、Illustrator のデザインを使用し、それを SVG としてエクスポートし、データベースの値に従って CSS でグラフを変更することです。

これらの要素のように: http://graphicriver.net/item/infographic-elements/2656503?WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=REDPENCILMEDIA

これらのドーナツ グラフを使用してパーセンテージを視覚化したいと思います。しかし、CSS (または jQuery) を使用してグラフィックを調整するにはどうすればよいですか。

d3.js やその他のライブラリに関するいくつかのチュートリアルを見つけましたが、グラフを生成する代わりに Illustator デザインを使用したいと思います。2 日前から Google を利用しています。

ヒント、ヒント、リンクなどは大歓迎です! ありがとう :)

0 投票する
1 に答える
1126 参照

animation - Javascript なしの SVG Spin Gear

Inkscapeで錆びた歯車を作りました。Javascript を使用せずに歯車を回転する車輪のように回転させるにはどうすればよいですか。この SVG ファイルに SVG コードのみを含めたい。SVG を手動でプログラムするか、Inkscape を使用してアニメーションを作成することができます。これが私のコードです。歯車は中心を周回していますが、その場で回転させたいです。

0 投票する
1 に答える
808 参照

svg - SVG 読み込みアニメーション - 結合できますか?

SVG ベースのローディング アニメーション、別名「イタチの回転<use>」がありますが、ベース アニメーション (フェード アウト属性) を利用してタグで参照することにより、これをより効率的にコーディングできるかどうか疑問に思っています。

これらの<use>タグは 12 個ありますが、簡潔にするためにここでは省略しました。animation タグでは、属性のみbeginが毎回変更され、残りは同じです。

私にとって妥当と思われるさまざまなアプローチを試してみましたが、どれもうまくいきませんでした. それとも、基本的に各タグですべてのアニメーション属性を繰り返さなければならないのでしょうか?

SVG について少し知っているだけで、同じ結果を得る方法がたくさんあることに気づきました。

ありがとう。

--> フィドル