問題タブ [svg-animate]

つまり、SVGがアニメーションの完了を停止した後、アニメーションを最初からやり直して終了し、次にもう一度やり直したいということです。

私は試した：

しかし、それは機能しません。

アニメーションは制限なく停止して繰り返すことができますが、無期限のアニメーションを再開すると、累積値が失われ、初期値から開始されます。

例で明確にする必要があるかもしれません。このアニメーションを見てください:

このアニメーションを停止しid="second"、同じオブジェクトの回転に影響を与える別のアニメーション (たとえば ) を開始すると、中断しsecondたポイントから完全に継続mainします。しかし、これをクリックしてstartbox(または実際には他のイベントで)開始するmainと、開始前にすべての差が差し引かれ、回転がリセットされます。

私がしたいのは、アニメーションが以前に停止した場所から続行できる適切な「一時停止」です。もちろん、一定数の同じアニメーションと同じ数の同じ開始/停止ボタンを追加して効果をエミュレートすることもできますが、それは適切な解決策ではありません。特にポーズの数が限られているので。

全体の例 (Opera でのみ動作するようです)

私はSVGコードの一部を書いていて、次の問題に遭遇しました。

SVGがウィンドウのonloadイベントでドキュメントに追加されていない場合、animateTransformタグは機能しません（アニメーションを開始できません）。

例： http ： //jsfiddle.net/r4WEh/と http://jsfiddle.net/r4WEh/1/

唯一の違いは次のとおりです。

vs

最初のものでは、svgがwindowonloadイベントでdomに追加されます。2つ目では、mouseclickイベントでsvgがdomに追加されます。

どんな助けでもありがたいです！

この SVG アニメーションのコードは、四角形ごとに異なる速度を生成します。同様の速度が必要です（異なる期間）。これで見つからない属性、または簡単な解決策はありますか。

を使用してこれまで機能していた特定のパスをたどるように、長方形をアニメーション化したかったのanimateMotionです。これは私が持っているものです：

今私の質問：長方形の中心（20 20）が常にパス上にある状態で、長方形をパス（すでに達成されている）に従わせるにはどうすればよいですか？これはSVGが提供する手段で達成できますか？

誰かがこのコードの理由を教えてくれます:

http://jsfiddle.net/j2spu/2/

FF、Chrome 18 から 19、Safari、rekonq などで動作すると思いますが、Chrome 20 から 24 では動作しませんか?

内部に境界リング（緑と静的）があり、いくつかの「パルス状」の外側の円（青）がある円があります。静的な円の内側にある「パルス円」の部分のみを表示するには、これにどのようにアプローチしますか?

参照用に HTML をレンダリングする JS も含めましたが、JSFiddle で SVG を生成しません。

SVGにはレイヤーが存在すると思いますが、他の円のレンダリングをどのように構成したかを考えると、それはあまり役に立ちません。 操作方法を簡単にレビューします。

1. オレンジ色のグラデーションで背景の円を描き、その上に同心円を配置します。
2. 緑の静止円を描きます。
3. デカルト平面の基点に 4 つのパルスを配置します。
4. パルスをアニメーション化します。

メインの円の境界内でクリックを測定できることはわかっているので、パルスのアニメーションを (おそらくハッキーな方法で) 緑色の円のリング内に制限できることを期待しています。

たぶん、逆の塗りつぶしまたは何かがある上に配置された他の円ですか？アイデアを吐き出すだけです。私が知っていることはすべて試しましたが、他の例やアイデアの研究を見つけることができません。

これを達成する方法を考えるのに役立つ関連記事:

(円の) 円弧の SVG パスを計算する方法

世界中のツイートに対応するマップにドットを追加しています。ツイートが追加されると、赤い点で表されます。

次の 30 秒間 (ツイートのポーリング遅延と同じ間隔) で、ドットはゆっくりと黒くなり、古いことを示します。

次のコードはまさにそれを行いますが、最初のポーリングの後、後続のポーリングでは、マップ上のすべてのドットの色が、新旧の両方で赤に変更されます。さらに、フェード アニメーションは、最初のポイント セットがマップされたときにのみ発生します。

理由はありますか？

これが実際のマップです。最新のブラウザで表示します。

序章

DOM要素とDOM要素SVGの両方を使用するための基本的なアニメーション手法をいくつか知っています。だから私はこのSVGを作成しましたが、コードが多すぎない限り、x秒ごとにアニメーションをトリガーする方法を理解できません。やってみましたが、初めて待つだけです。Javascript<animate>begin="4s"

質問：

beginまたはのようなDOMプロパティがありますがdur、間隔を秒単位で定義するにはどうすればよいですか？これを達成するためのより良い方法はどれですか？

私が試したこと：

ここでの完全な例：SVGフィドル

ノート：

• すでにSVG仕様を確認しました
• Javascriptコードを追加するのはオプションです
• CSS3の使用もオプションです

デフォルトのピボット ポイント (0,0) を持つ svg 回転 (度) がある場合、回転変換行列を次のように計算できます。

しかし、ピボット ポイントが (0,0) でない場合、(px,py) としましょう。回転変換行列を計算するにはどうすればよいでしょうか。