javascript - Dynamically added SVG g tags are not showing - Stack Overflow

admin管理员组

文章数量:1287896

I dynamically added circle tags in g tag using jQuery.append() and got the following result.(server side language is php)

JSFiddle

However, the circles are not displayed when I load it from my local server.
Specifically, browser does not display circles in g tag at first load, then when I copy the part of g tag from chrome developer tool and paste it to separate html file (or jsfiddle etc.), it shows correctly.

What is the problem?

This is the JS code:

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

I dynamically added circle tags in g tag using jQuery.append() and got the following result.(server side language is php)

JSFiddle

However, the circles are not displayed when I load it from my local server.
Specifically, browser does not display circles in g tag at first load, then when I copy the part of g tag from chrome developer tool and paste it to separate html file (or jsfiddle etc.), it shows correctly.

What is the problem?

This is the JS code:

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

• javascript
• html
• svg

Share Improve this question Follow edited Nov 24, 2015 at 13:44 Universal Electricity 77511 gold badge1313 silver badges2626 bronze badges asked Nov 24, 2015 at 12:45 soonoosoonoo 90711 gold badge1313 silver badges3535 bronze badges 20

• what is the DOCTYPE that you are using have you declared that you will be using svg in your html? – vssadineni Commented Nov 24, 2015 at 12:49
• your fiddle doesn't contain javascript – Roland Starke Commented Nov 24, 2015 at 12:49
• 1 Where is Dynamically added svg g tags code?? – ozil Commented Nov 24, 2015 at 12:50
• 1 Can you provide a snippet that really show how you are dynamically inserting these g tags (in your snippet, they are inserted in the HTML, not with js). – Quentin Roy Commented Nov 24, 2015 at 12:57
• 1 jsfiddle/vssadineni/45fzzmw3 I hope this might help you. – vssadineni Commented Nov 24, 2015 at 13:23

 |  Show 15 more ments

1 Answer 1

Sorted by: Reset to default 12

The problem you are facing is that SVG elements are different from HTML elements. jQuery only creates HTML elements. This problem has already been discussed in this thread. Here is a working solution that makes use of the makeSVG function that has been proposed (blue circles are added with JavaScript). Notice that I didn't used at all jQuery as it is superfluous here.

function makeSVGEl(tag, attrs) {
    var el = document.createElementNS('http://www.w3/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>

本文标签： javascriptDynamically added SVG g tags are not showingStack Overflow