Можно ли пересечь SVG DOM?

Question

Я делаю ajax получить вызов на веб-страницу и вернуть html, я добавляю html к определенному jQuery div. Я попытался множество различных способов, чтобы попытаться пересечь SVG DOM, в идеале в JQuery это то, что я хотел бы сделать:

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

Я попытался SVGjQuery плагин KeithWood, но я не могу понять, Я попытался выбрать элемент svg по классу и установить его в качестве моего контекста при выборе тега g, я просмотрел Snap.SVG, но он все время выдавал ошибку, которая не была определена. Любая помощь, проходящая через SVG DOM?

EDIT: AJAX не возвращает SVG тег на всех

$.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') 
    } 
}) 

Я приложил его к странице и прошел, чтобы найти, где это я получаю это:

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

Когда его должно быть так, как это делается на обычной странице:

<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

Попробуйте библиотеку D3js. Я использую его для всех видов svg. прекрасно работает.

Answer 2

Вы все еще можете сделать это в JQuery без каких-либо плагинов:

<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 3

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 4

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