Javascript 动态添加的SVG标记不显示

我使用

jQuery.append（）

在

g

标记中动态添加了

circle

标记，得到了以下结果。（服务器端语言为php）

但是，当我从本地服务器加载时，不会显示圆圈。
具体来说，浏览器在第一次加载时不会在g标记中显示圆圈，然后当我从chrome developer tool复制

g

标记的一部分并将其粘贴到单独的html文件（或JSFIDLE等）时，它会正确显示

有什么问题

这是JS代码：

    var dataset = new Array();

    <?php
     // data is added to dataset
    ?>

    var day = dataset[dataset.length - 1].date - dataset[0].date + 1;

    for(var i = 0; i < dataset.length; i++){
        var count = dataset[i].date - dataset[0].date; 

        if(dataset[i].like == true) $('g.like').append("<circle  cx='"+ (count * 100) + "' cy='" + dataset[i].num/max * 300 +"' r = '4.5'  fill='red'>s</circle>");
        else $('g.dislike').append("<circle  cx='"+ (count * 100) + "' cy='" + dataset[i].num/max * 300 +"' r = '4.5'  fill='red'>s</circle>");
        }

var数据集=新数组（）；
var day=dataset[dataset.length-1]。日期-dataset[0]。日期+1；
对于（var i=0；i

您面临的问题是SVG元素与HTML元素不同。 jQuery只创建HTML元素。 这个问题已经在第二章中讨论过了。 下面是一个有效的解决方案，它利用了已经提出的

makeSVG

函数（蓝色圆圈添加了JavaScript）。 注意，我根本没有使用jQuery，因为它在这里是多余的

函数makeSVGEl（标签、属性）{
var el=document.createElements（'http://www.w3.org/2000/svg",标签),；
for（属性中的变量k）{
el.setAttribute（k，attrs[k]）；
}
返回el；
}
变量数据集=[
{x:100，y:33}，
{x:200，y:133}，
{x:300，y:100}，
{x:400，y:100}，
{x:500，y:100}，
{x:600，y:100}
];
var svg=document.querySelector（“svg.progress chart”）；
var g=makeSVGEl（“g”，{class:“厌恶”}）；
svg.appendChild（g）；
dataset.forEach（函数（coords）{
g、 appendChild（makeSVGEl（“圆”）{
cx:coords.x，
赛义德：库兹，y，
填充：“蓝色”，
r:4.5
}));
});

您正在使用的DOCTYPE是什么？您是否声明将在html中使用svg？您的小提琴不包含javascriptWhere动态添加svg g标记代码？？您能否提供一个片段，真正展示如何动态插入这些
g
标记（在您的片段中，它们插入html中，而不是js中）. 我希望这可能会对您有所帮助。如果没有JQuery，这将如何实现。我有一种预感，JQuery根本不需要。@AndrewS我的代码段中没有JQuery，谢谢。无法理解CreateElements解决了什么问题