Reputation: 6645
Though there are many answers on SO on how to append an SVG in a div but i couldn't get any of them to work for me. May be because i've never worked with SVGs before.
So, i'm creating an SVG on my node server and then creating a JSON object with some other data along with SVG in it
svgFiles.push({
'file': svgDump, //This holds well created SVG
'vp': JSON.stringify(viewport),
'page': pageNum
});
and then sending it back as a response to my angularjs 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;
})
Now that i've my SVGs saved in a variable, i expected that appending it in any DIV should work.
Though it did work but it was all plain text including stuff like @font-face, src etc.
I'm sure there is something that i'm missing or not doing the right way. How can i achieve this?
Upvotes: 4
Views: 1095
Reputation: 6645
Finally found a solution for this with help of a friend.
All i needed to do was:
$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);
});
Upvotes: 5