3000 以上のパスを持つモンスター アニメーション SVG ファイルを作成しました。各パスは、宣言型 SMIL アニメーションを使用して個別にアニメーション化します。IE9 の小さな js フォールバックを使用して、すべての新しいブラウザーでゆっくりと、しかし美しく再生されます。（リンクを投稿しますが、何も明確になりません。）
HTML5 とインライン SVG を使用してページを開発しました。作業を終えようとしているときに、モバイル ブラウザにこの巨大なファイルを強制的に詰まらせたくないことに気付きました。そのため、svg を外部ファイルに移動し、すべての xml 宣言を追加し直しました。ページ内の重要な情報が既にレンダリングされた後、いくつかの条件付きロジックと教科書 ajax を使用して、外部 svg を呼び出しています。
function loadThatSvg(){
var xhr = new XMLHttpRequest;
xhr.open('get','floral.svg',true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 ) {
var flowers = xhr.responseXML.getElementById('floralpaths');
var stage = document.getElementById('stage');
stage.appendChild(flowers);
}
}
};
xhr.send(null);
}
window.onload = function(){
setTimeout(loadThatSvg,3000);
}
さまざまなブラウザーのインスペクター ツールは、ファイルが正しく読み込まれていることを示しています。問題は、アニメーションがトリガーされないため、何も起こらないことです! それらはDOMにあります。私はそれらを見ることができます。しかし、マークアップでSMIL アニメーションを開始するタイマーやイベントは、動的に読み込まれたアニメーション要素には適用されないようです。
しかし、その後、このユース ケースに焦点を当てた Bugzilla のバグ レポートを読み、問題が解決されたことを示唆しています (ただし、FF13 での私のテストでは、明らかに解決していません)。うーん...
動的にロードされた SVG コンテンツで SMIL アニメーションのクロックを開始するために使用できるカスタム関数または宣言はありますか? 答えが完全に「いいえ」であっても、私のような人々が何らかの方法で知っているといいでしょう. 明確にしていただきありがとうございます。
アップデート：
これが生のsvgファイルです。FF、Opera、および Webkit で動作します。しばらくお待ちください:
そして、同じドメインから、まったく同じ SVG ファイルを参照するページがあります。appendChild以前のコードのステートメントを変更しadoptNode()て、FF13 と Opera 11.64 で機能するメソッドを含めるようにしましたが、webkit でアニメーションが開始されることはありません。