如何在我們的html頁面追加jquery的svg標籤？

我想附加一些svg標籤，然後在svg標籤中添加我從XML文件中提取座標的圓和線。如何在我們的html頁面追加jquery的svg標籤？

我可以從jquery .append追加相同的內容，但我無法在瀏覽器中看到任何內容，儘管這些標記是動態添加到我們的DOM中的，但無法在瀏覽器中看到。

這是我取的XML數據和附加到DOM代碼： -

$(xml).find("Quadron").children().each(function(i){ 
    var valueParameter=$(this).attr("value"); 
    var riskParameter=$(this).attr("risk"); 

    $('<circle/>',{ 
     clicked:'plot'+i, 
     technology:$(this).parent().parent().attr("YearName"), 
     quadronName:$(this).parent().attr("title"), 
     class:'plot', 
     cx:dotsXposition, 
     cy:dotsYposition, 
     r:function(){ 
      if(valueParameter=="high"){return 10;} 
      else if(valueParameter=="medium"){return 5;} 
      else if(valueParameter=="low"){return 2;} 
      }, 
     fill:function(){ 
      if(riskParameter=="high"){return "#b42a2d";} 
      else if(riskParameter=="medium"){return "#ebd62e";} 
      else if(riskParameter=="low"){return "#72aa2c";} 
      } 
    }).appendTo('#circlePlot'); 

    $('<text/>',{ 
     clicked:'plot'+i, 
     technology:$(this).parent().parent().attr("YearName"), 
     class:'plot', 
     text:$(this).text(), 
     x:dotsXposition+15, 
     y:dotsYposition 
    }).appendTo('#circlePlot'); 

    dotsXposition+=10; 
    dotsYposition+=10; 

    }); 

}

我發現下面的代碼，以便刷新頁面，並顯示SVG elemnts： - $（「機構」）HTML（$（「身體」）HTML（））。

但在將此代碼包含在我的java腳本文件中後，單擊事件不起作用。

有什麼辦法可以解決這個問題。

來源

2014-09-23 Shakti

試的jQuery插件，SVG或raphael.js的 – 2014-09-23 17:06:09

可能重複（http://stackoverflow.com/questions/ 3642035/jquerys-追加 - 不工作與 - SVG元素） – 2014-09-24 05:05:06

得到了我的問題的答案。我已經使用D3.js動態地將SVG元素附加到我的DOM中，並且現在工作正常。

我用下面的代碼：[？jQuery的追加不能與SVG元素工作]

d3.select("#circlePlot").append("circle") 
      .attr("clicked","plot"+i) 
      .attr("technology",$(this).parent().parent().attr("YearName")) 
      .attr("quadronName",$(this).parent().attr("title")) 
      .attr("class","plot") 
      .attr("cx",500+(r*Math.cos(angle))) 
      .attr("cy",350-(r*Math.sin(angle))) 
      .attr("r",function(){ 
       if(valueParameter=="high"){return 10;} 
       else if(valueParameter=="medium"){return 6;} 
       else if(valueParameter=="low"){return 3;} 
       }) 
      .attr("fill",function(){ 
       if(riskParameter=="high"){return "#b42a2d";} 
       else if(riskParameter=="medium"){return "#ebd62e";} 
       else if(riskParameter=="low"){return "#72aa2c";} 
       }); 

     d3.select("#circlePlot").append("text") 
      .attr("clicked","plot"+i) 
      .attr("technology",$(this).parent().parent().attr("YearName")) 
      .attr("class","plot") 
      .text($(this).text()) 
      .attr("x",500+(r*Math.cos(angle))+10) 
      .attr("y",350-(r*Math.sin(angle)));

來源

2014-09-24 05:47:02 Shakti

它看起來像你的問題是與html vs svg命名空間。以下答案在總結您的問題方面做得很好：jquery's append not working with svg element?

我的建議是使用js庫來處理創建元素。 Snap svg是一個很好的解決方案，應該處理您遇到的問題。

另外，做$('body').html($('body').html());是一個非常糟糕的主意。從本質上講，您正在清除所有DOM元素（綁定了所有事件）並用全新元素重新構建整個頁面。這就是爲什麼你的所有事件都被破壞的原因。

來源

2014-09-23 17:45:12

如何在我們的html頁面追加jquery的svg標籤？

回答

相關問題