如何在我们的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标签？

回答

相关问题