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

<

Answer 1

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");

Answer 2

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%'
                                            });
                            }
                    })

Answer 3

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