Is it possible to traverse SVG DOM?

Question

I am making an ajax get call to a web page and return the html, I append the html to a jQuery defined div. I have tried a multitude of different ways to try to traverse the SVG DOM, ideally in jQuery this is what I would like to do:

$(div).find('g.pt1').each(function(){
    //do stuff
});

I have tried KeithWood's SVGjQuery plugin but I can't figure it out, I have tried selecting the svg element by class and setting it as my context when selecting the g tag, I looked into Snap.SVG but it kept throwing an error that Snap was not defined. Any help traversing SVG DOM?

EDIT: AJAX does not return the SVG tag at all

$.ajax({
    type: "GET",
    url: href,
    success: function (data) {
        var div = document.createElement('div');
        div.innerHTML = xhr.responseText;
        $(div).find('[id^="chart"] g text').each(function () {
            g = this.innerHTML;
            alert();
        })
        $('#a-page').append(div)
        alert('passed the find')
    }
})

I appended it to the page and went through to find where it is an I get this:

<div id="chart582u5" style="width:93%;"></div>

When it should be this, like how it is on the normal page:

<div id="chart582u5" style="width:93%;">
    <style></style>
    <svg class="pzchart" height="260" width="388" viewport="0 0 388 260" viewBox="0 0 388 260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g>
            <text>what I want</text>
        </g>
    </svg>
</div>

Answer 1

You can still do it in jQuery without any plugins:

<div id="container">
    <svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
        <g stroke="green" fill="white" stroke-width="1">
            <text x="250" y="150" font-size="55">Hello</text>
            <text x="300" y="200" font-size="55">World</text>
        </g>
    </svg>
</div>

<script>
    var a = []
    $('#container g text').each(function(){
        a.push(this.innerHTML);
    });

    alert(a.join(','));
</script>

DEMO

Answer 2

 var div = $('<div/>') .attr('id', 'chart582u5') .css('width', '93%'), yourText = 'hello world'; var svgDOM = $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')) .attr('xmlns', 'http://www.w3.org/2000/svg') .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink') .attr('preserveAspectRatio', 'xMidYMid') .attr('width', 388) .attr('height', 260) .attr('viewBox', '0 0 388 260') .html('<g><text x="50%" y="50%">' + yourText + '</text></g>'); div.append(svgDOM); $('body').append(div); 

Answer 3

function GenerateUniqueStrID() {
  var CurDate = new Date();
  return '<UID>' + CurDate.getTime() + '</UID>';
}

$.ajax({
        url: href+'?' + GenerateUniqueStrID(),
        dataType: 'xml',
        success: function(data) {
            console.log(data);
            $(data).find("selector").each(function(){
                console.log($(this));
                /*******************************************
                your XMLFile must look like this template for exemple:
                <?xml version="1.0" encoding="utf-8"?>
                <yourData>
                  <selector></selector>
                  <selector2>
                    <selector></selector>
                    ....
                  </selector2>
                </yourData>
                *******************************************
                create your elements on the fly
                *******************************************/ 
            //})
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("error! "+ textStatus);
        },
        complete: function(textStatus) {
            console.log('completed');
        }
    })

Answer 4

Try D3js library. I've been using it for all sorts of svg things. works great.