javascript - JavaScript での SVG のプリロード

Question

javascript が Image() オブジェクトを使用して出力前に画像を準備できることは承知していますが、SVG にも同じ機能が必要です。「img」タグにロードするのではなく、JavaScript で SVG マークアップを作成し、画面にダンプする前に src ファイルが確実にロードされるようにします。これが可能かどうか、またそれを達成する方法を知っている人はいますか?

ありがとう。

Answer 1

通常の AJAX-GET リクエストを介して SVG ファイルを取得し、このリクエストが成功したときにコードを挿入するだけです。

$.get( 'path/to/your/svg/file.svg', function(data) {
  $('#svgContainer').html( data );
});

Answer 2

<iframe> を作成し、iframe に「load」のイベント リスナーを追加してから、iframe の src をロードする svg に設定できます。

例えば：

var iframe = document.createElement("iframe");
iframe.addEventListener('load', function() {
  ... svg now loaded, do something ...
});
iframe.src = "your.svg";

必要に応じて、要素をメイン ドキュメントにインポートできます。ノードを追加する前に、ノードをメイン ドキュメントにインポートまたは採用する必要があることに注意してください。

おそらく、Sirko が提案したように XmlHttpRequest を使用する方がより自然です。

Answer 3

あなたが使用することができますcreateElementNS():

var img = document.createElementNS('http://www.w3.org/2000/svg','image');
img.setAttributeNS(null,'height','536');
img.setAttributeNS(null,'width','536');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg');
img.setAttributeNS(null,'x','10');
img.setAttributeNS(null,'y','10');
img.setAttributeNS(null, 'visibility', 'visible');
$('svg').append(img);