动态添加的SVG g标签未显示

Question

我动态地circle在g标签中添加标签jQuery.append()并得到以下结果.(服务器端语言是php)

的jsfiddle

但是,当我从本地服务器加载圆圈时,不显示圆圈.
具体来说,浏览器在第一次加载时不会在g标签中显示圆圈,然后当我g从chrome开发人员工具复制标签的一部分并将其粘贴到单独的html文件(或jsfiddle等)时,它会正确显示.

问题是什么？

这是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>");
        }

Answer 1

您面临的问题是SVG元素与HTML元素不同.jQuery只创建HTML元素.此问题已在此主题中讨论过.这是一个使用makeSVG已经提出的功能的工作解决方案(使用JavaScript添加蓝色圆圈).请注意,我没有使用任何jQuery,因为它在这里是多余的.

function makeSVGEl(tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var k in attrs) {
      el.setAttribute(k, attrs[k]);
    }
    return el;
}

var dataset = [
  { 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: "dislike" });
svg.appendChild(g);

dataset.forEach(function(coords){
  g.appendChild(makeSVGEl("circle", {
    cx: coords.x,
    cy: coords.y,
    fill: "blue",
    r: 4.5
  }));
});

<svg class="progress-chart" width="600" height="400">
    <g class="like">
        <circle cx="0" cy="266.66666666666663" r="4.5" fill="red"></circle>
        <circle cx="100" cy="200" r="4.5" fill="red"></circle>
        <circle cx="200" cy="233.33333333333334" r="4.5" fill="red"></circle>
        <circle cx="300" cy="200" r="4.5" fill="red"></circle>
        <circle cx="400" cy="133.33333333333331" r="4.5" fill="red"></circle>
        <circle cx="500" cy="166.66666666666669" r="4.5" fill="red"></circle>
        <circle cx="600" cy="300" r="4.5" fill="red"></circle>
        <circle cx="700" cy="33.33333333333333" r="4.5" fill="red"></circle>
    </g>
</svg>