Question

我使用circle在g标记中动态添加了jQuery.append()个标记，并获得了以下结果。（服务器端语言为php）

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

有什么问题？

这是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元素。 this thread已经讨论过这个问题。这是一个使用已提出的makeSVG函数的工作解决方案（使用JavaScript添加蓝色圆圈）。请注意，我并没有在所有jQuery中使用它，因为它在这里是多余的。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: