Is there a way to edit an SVG file directly in JavaScript without relying on any framework?
I have a master SVG file that contains some child SVG elements.
I've managed to retrieve the content of these children using Ajax, but now I need to insert them into an SVG tag.
For instance, I created a new tag:
var svgInclude = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgInclude.setAttribute('id', 'include_1');
svgInclude.setAttribute('height', widthVis);
svgInclude.setAttribute('width', widthVis);
svg.appendChild(svgInclude);
Now, when I try to insert the XML data retrieved from this function:
function loadXMLDoc(url, cb) {
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) cb(xmlhttp.responseText);
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
Using:
loadXMLDoc(host + '/svg/frame_panto_v2.svg', function(xml) {
svgInclude.innerSVG(xml);
});
Unfortunately, it doesn't work and throws an error
Uncaught TypeError: Object #<SVGSVGElement> has no method 'innerSVG'innerHTML but encountered the same issue.
Any suggestions on how to paste a downloaded SVG file into an SVG tag?
Thank you for your assistance.