問題タブ [svg-animate]

正確に説明する方法がわかりません。内容が次のような Base64 化された SVG のfiddleです。

(元々は、スタイルシートに隠れている繰り返しのない背景画像でした)。

さて、Chromeでは、これは私が期待する結果になります:

しかし、Firefox では、奇妙なことが起こります (GIF の色がオフになっているのは許してください)。

とにかく強制的に領域を再描画する必要がある場合にのみ、アニメーションのフレームをレンダリングするようです。また、実行を数回押すと、SVG が異なるフレームでレンダリングされるため、さらに困惑します (0sドキュメントが読み込まれるときにあるはずです...)。

これは私を困惑させます。バグだとしか思えませんが、解決するための回避策を見つけたいと思います。私が考えることができる唯一のことは、SVGがある領域を短い間隔で強制的に再描画させることですが、それを行う方法がわかりません...

何か案は？

編集:おそらく問題は SVG 自体にあるのかもしれませんが、私はまだ何についてはわかりません。

編集 2:を削除する<circle>と問題は解決します。何？？これは受け入れられる解決策ではありません...

w3cvalidator で自分のサイトをチェックしながら

このエラーAttribute data-ls not allowed on svg element at this pointとEnd tag svg did not match the name of the current open element (use) を示しています。

ここに私が使用したサンプルコードがあります。

ありがとう....

関数を Snap.load(...loading SVG... my method...) に追加すると、Snap.Load() の内部にあるこのメソッドを呼び出せないのはなぜですか?

5 つのパスを持つ SVG ファイルがあり、それぞれに異なる ID が割り当てられています。パスは Illustrator からエクスポートされます。

D3 で 5 つの ID 状態をアニメーション化するにはどうすればよいですか? Snap.svg では、これを簡単に行うことができます

stage1.animate({"path" : (stage2.attr("path"))}, 1000);

ありがとう！

すべて SVG 内で多角形をアニメーション化しています (CSS で背景として使用できます)。使用する値をランダムに生成する方法や、アニメーションがロードされるたびに常に同じ位置から開始されないようにする方法があるかどうか (外部 SVG ライブラリを使用せず、JavaScript を使用せずに) 興味がありますか?

現在の SVG は次のとおりです。