CODEWITHSUNDEEP
javascriptxmldynamicsvg
MattD
MattD

Reputation: 1364

Dynamically adding SVG in Javascript

I have an SVG file created in a program like InkScape. I want to load it in Javascript and put it into a SVG object along with other SVG elements.

I'd like to have a function that I can pass a URL, it will fetch that SVG, then return a "g" object grouping everything in the SVG file I loaded.

SVG.LoadXML = function (url, continuation) {
    var http = new XMLHttpRequest();
    http.open("GET", url, false);
    http.send();
    textBody = http.responseText;

    var g = document.createElementNS(SVG.ns, "g");

    g.innerHTML = textBody;

    return g;
}

The body of the file being loaded looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC [...] >
<svg version="1.1" [...] >

<g>
  <defs>
    <path id="SVG1ID_1_" [...]
etc.

So, I think what I want to do is open the file as XML, then skip over the first two nodes, enter the second one, and copy all the nodes inside there into my SVG in the document.

This seems like the sort of thing that should be pretty simple and has been implemented a few different ways by a few thousand people already.

Upvotes: 2

Views: 1698

Answers (2)

Thomas W
Thomas W

Reputation: 15391

When dealing with SVG, don't fall into the trap expecting that this works exactly like HTML. A few things need to be done differently here:

SVG elements aren't HTML and you can't set .innerHTML. Use .appendChild() instead. You can obviously only append a DOM element, not plain text, so use .responseXML instead of .responseText.

For navigating the loaded SVG, picking only certain nodes, use the standard DOM methods like .getElementById(), .getElementsByTagName(), .childNodes, firstChild, .lastChild etc.

To append a node from the retrieved SVG to the main SVG, you have to import it first. See another post that describes this.

Upvotes: 4

MattD
MattD

Reputation: 1364

I hadn't realized that appendChild will also remove that child from the parent, thus my implementation was only getting about half of the SVG items. Here's the working code:

SVG.LoadXML = function (url) {
    var http = new XMLHttpRequest();
    http.open("GET", url, false);
    http.send();
    xmlBody = http.responseXML;

    var g = document.createElementNS(SVG.ns, "g");
    var svg = xmlBody.getElementsByTagName("svg")[0];
    do {
        var child = svg.firstChild;
        g.appendChild(child);
    } while (svg.firstChild);
    return g;
}

Upvotes: 0

Related Questions