1

ページに 2 つの埋め込み svg-lets をロードしています。アニメーション化されたものはありません。それらは setTimeout で順番にロードされます。最初にアニメーションをロードすると、すべてがうまくいき、アニメーションが期待どおりに開始され、2 番目の静的 svg がその後正しく表示されます。最初に 2 番目をロードし、その後アニメーションをロードすると、アニメーションが開始されません。

コードは次のとおりです: jsfiddleスイッチ #svg1、および #svg2 は JavaScript 内にあります。

ブラウザをチェックしたところ、クロムとサファリの両方がこの動作を示しているため、これはおそらく Webkit のバグであることがわかりました。FF 12 と Opera は問題ありません。

これは JS コードで修正できますか、それとも Webkit でバグを報告する必要がありますか?

== 追加

svgがsettimeoutでロードされた後にアニメーションが開始されない理由について、質問を言い換える必要があると思います。

Jared が以下で調査したように、要素が DOM に存在し、DOM 操作を介してフォーカス要素に並べ替えられた場合に機能します。Chrome と Webkit には、animate 要素への beginElement() 呼び出しによるキックが必要です。これは、プレーンテキストから構築された要素に対してはまだうまくいきません。私は Mac しか持っておらず、これは趣味のプロジェクトだと考えているので、MS IE は完全に無視しています。

4

1 に答える 1

1

うーん、思ったより時間がかかりましたが、なんとか完成しました。基本的にSVG、マークアップなどの準正規表現で使用していた方法は、控えめに言っても、それを実現する方法ではありませんでした。

答えはsvg、特にアニメーションを実行したいときにアニメーションを開始/停止するために、DOM アニメーションのメソッドと属性を使用することです。どうやら、Firefox は内部の HTML/マークアップを操作するだけで、要素とアニメーションを再初期化するだけでうまくいったようです。ただし、Chrome (Webkit?) では、実際にはプログラムで要素にアクセスして制御する必要があります。IE、Opera、または Safari をチェックインしていません。

問題とは関係がないため、矢印を完全に省略して、例をやり直しました。代わりに、アニメーション機能の作成とテストに専念しました。以前は見逃していた重要なポイントは次のとおりです。

var $lasso = $('#lasso'),
    animater = $lasso.find('animate')[0],

...

animater.beginElement();

...

animater.endElement();

これが私が作成したデモです。これは、質問にあるものとは大きく異なります。

http://jsfiddle.net/9hBfs/

ただし、私が「なげなわ」効果と呼んでいるものはまだ残っています。

Mozilla Developer Network (MDN) のサイトを参考にするとよいでしょう。MDN には多くの優れた情報があり、非常に信頼できる機関です。

于 2012-06-09T14:55:13.270 に答える