Anhängen SVGs in einem div in js

Question

Obwohl es viele Antworten auf SO gibt, wie man eine SVG in einem Div anhängen, aber ich konnte keine von ihnen für mich arbeiten. Vielleicht weil ich noch nie mit SVGs gearbeitet habe.

Also, ich bin ein SVG auf meinem Knoten-Server erstellen und dann ein JSON-Objekt mit einigen anderen Daten zusammen mit SVG darin

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

Erstellen und Senden sie dann als Antwort auf meine AngularJS zurück Code.

$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; 
}) 

Nun, da ich in einer Variablen gespeichert mein SVGs habe ich erwartet, dass es in jedem DIV anhängt funktionieren soll.

Obwohl es hat funktioniert, aber es war alles Klartext einschließlich Sachen wie @ font-face, src usw.

Ich bin sicher, es ist etwas, das ich bin fehlt oder ist nicht die richtige Art und Weise zu tun. Wie kann ich das erreichen?

Answer 1

Endlich eine Lösung dafür mit Hilfe eines Freundes gefunden.

Alles, was ich tun musste, war:

$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); 
});