2016-12-26 8 views
2

SVGをdivに追加する方法については、多くの回答がありますが、私のために働くことはできませんでした。以前はSVGを使ったことがなかったからかもしれません。私angularjsへの応答として、それを返送し、その後

だから、私は私のノードサーバ上でSVGを作成していますし、それにSVGと一緒にいくつかの他のデータと
js内のdiv内にSVGを追加する

svgFiles.push({ 
    'file': svgDump, //This holds well created SVG 
    'vp': JSON.stringify(viewport), 
    'page': pageNum 
}); 

をJSONオブジェクトを作成し、コード。

$http({ ... }).then(function callback(resp) { // request to node server 
    var svg = resp.data.file; 
    var container = document.createElement('div'); 
    var oldContent = container.innerHTML; // There is going to be an array of objects with SVG data hence i need the 'APPEND' functionality 
    // But currently assuming there is only 1 object for demo purpose 
    container.innerHTML = oldContent + svg; 
}) 

今、私は変数に自分のSVGsを保存したことを、私は、任意のDIVにそれを追加すると、動作するはずと予想しました。

それは仕事がしたが、それはする@ font-faceのようなものを含む、すべてのプレーンテキスト、でしたが、SRCなど

私は存在しないか、または正しい方法をやっていないよ何かがあると確信しています。どうすればこれを達成できますか?

答えて

4

最後に、友人の助けを借りて解決策を見つけました。

私が行うために必要なすべてがあった。

$http({ ... }).then(function callback(resp) { // request to node server 
    var svg = resp.data.file; 
    var container = document.createElement('div'); 
    var parser = new DOMParser(); 
    var doc = parser.parseFromString(svg, "image/svg+xml"); 
    container.appendChild(doc.documentElement); 
}); 
+0

はDOMParserには、私が直接DOMにSVG(上記のような文字列に格納されていない)を追加する場合しかし、何の遅れがない非常に非常に遅いSVGsのレンダリングをした使用します/パフォーマンスの問題などです。 –

関連する問題