jQuery appending to AJAX loaded SVG problem

Question

I am successfully loading via AJAX some svg from external file:

$("#svg").load(svgUrl + " svg", function() {  
    // do stuff  
});

My HTML looks like that:

<div id="svg" ...>
    <svg ...>
        ...
    </svg>
</div>

I can see the graphics just fine. Now I want to add some additional svg elements to the loaded svg. I changed my script to:

$("#svg").load(svgUrl + " svg", function() {  
    $("svg").append("<g id='compass'></g>");  
    // do stuff  
});

For some reasons the added element appears as hidden in firebug and no matter what xml I put inside of it I can't see it on my webpage.

Update:
Thanks to echo-flow I was able to append to my SVG. Now if I try to load my compass svg from another xml file it doesn't appear in my DOM. At the moment my code looks like:

$("#svg").load(obj.svgUrl + " svg", function() {
    var svgns = "http://www.w3.org/2000/svg";
    var g = document.createElementNS(svgns,"g");
    g.setAttributeNS(null,'id','compass');
    $("svg").append(g);
    $("#compass").load("files/svg/compass.xml");
});

If I look in console in firebug I see that result of the AJAX request for compass markup is successful but is empty.

jbeard4 · Accepted Answer · 2011-07-25T15:15:08.113

17

jQuery is not really built to be aware of XML namespaces, so the string "<g id='compass'></g>"is likely getting parsed such that the generated DOM nodes are in the default namespace, as opposed to the SVG namespace. You can solve this by using regular DOM to create the nodes. This would look like the following:

svgns = "http://www.w3.org/2000/svg"
$("#svg").load(svgUrl + " svg", function() {  
    var g = document.createElementNS(svgns,"g");
    g.setAttributeNS(null,'id','compass');
    $("svg").append(g);
    //do stuff
});

If you need to create more complex structures, then I would recommend looking at the jquery-svg library, which has a cleaner API for generating SVG DOM.

Updated

I misunderstood that you were trying to load an SVG document and append it to your host HTML document - instead, I thought you were trying to generate SVG using script. To solve your problem, I would recommend doing the following (not tested, but should work):

//get the SVG document using XMLHTTPRequest
$.get(svgUrl + " svg",
function(svgDoc){
  //import contents of the svg document into this document
  var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);
  //append the imported SVG root element to the appropriate HTML element
  $("#svg").append(importedSVGRootElement);
},
"xml");

edited Jul 25 '11 at 15:15

answered Jul 23 '11 at 18:51

jbeard4

12,664
4
57
67

So if I have an external file with a piece of SVG markup that I want to append to my already loaded SVG what would be the most simple way of doing that? Using library...? – lanan Jul 24 '11 at 21:36
Thank you so much for trying to help me! I used your first example and successfully appended to my loaded svg markup. Now I want to add some xml from another external file inside generated empty compass element but it doesn't seem to work. I will update my question to try to make it clear. – lanan Jul 26 '11 at 19:19
In order to append content from another SVG document into your host HTML document, you need to use the technique I listed in my updated answer, not the technique in the original answer. It doesn't make sense to use load() and then generate markup with DOM inside of the load callback. – jbeard4 Jul 26 '11 at 21:20
Thanks again! Got my svg showing after using your updated method for both svg files! – lanan Jul 26 '11 at 23:04
Cool, this led me in the right direction. My issue was somewhat related. This answer helps if you're using d3 and Backbone or something similar: http://stackoverflow.com/questions/9651167/svg-not-rendering-properly-as-a-backbone-view – Milimetric Oct 17 '12 at 18:51

score 0 · Answer 2 · answered Dec 22 '14 at 14:36

I got it to work like this.

                    $.ajax({
                            url: url,
                            data: {data:tosendAlong},
                            type: "POST",
                            dataType: "text",
                            success: function (svg) {
                                    $("#map").html('<?xml version="1.0"?>' + svg)
                                            .attr({
                                                    'height': '100%',
                                                    'width': '100%'
                                            });
                            }
                    })

score 0 · Answer 3 · answered Jul 23 '11 at 18:11

0

It might be easier if you start using jquery canvas. which is a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML

answered Jul 23 '11 at 18:11

makeitmorehuman

11,287
3
52
76

Thank you for suggestion! For this specific project I wanted to use inline SVG in HTML5 without additional SVG libraries. – lanan Jul 23 '11 at 18:51

jQuery appending to AJAX loaded SVG problem

3 Answers3

Linked