2012-04-26 8 views
2

javascriptはImage()オブジェクトを使って出力前に画像を準備することができますが、SVGには同じ機能が必要です。私は "img"タグにロードするのではなく、javascriptにSVGマークアップを作成し、srcファイルをロードしてから画面にダンプするようにしたいと思っています。これが可能かどうか、どのように達成するかを知っていますか?javacriptのSVGをあらかじめロードする

ありがとうございました。

答えて

3

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

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

これはアイデアですが、SVGは実行時に動的に作成されます(Raminsonの答えを参照)。私はSVG onloadイベントを使うことを望んでいましたが、静的SVGでしか動作しないようです。私はjs SVGオブジェクトに動的にonloadイベントを追加しようとしましたが、決して起動しません。奇妙なことは、このメソッドを使用してクリックイベントが発生するということです。 **動的に生成されたSVGからSVGのロードイベントをどのように起動させるのか?** –

+0

'svg.addEventListener( 'SVGLoad'、function(){ alert(" loaded! ") });' //アラートはしません.... :( –

1

あなたがcreateElementNS()を使用することができます、>あなたが<のiframeを作成することができ

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); 
2

iframeの上の「ロード」のイベントリスナーを追加し、あなたがSVGにIFRAMEのSRCを設定ロードしたい。

例えば:

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

あなたがメインの文書に要素をインポートすることができますしたい場合は、ちょうどあなたがそれらを追加しようとする前に、メイン文書にimportまたはadoptのいずれかにノードを必要とすることに注意してください。

Sirkoのように、XmlHttpRequestを使用するのはおそらく自然です。

関連する問題