SVG元素在容器的左上角顯示

Question

SVG的新功能。 我跟蹤了SVG的幾個示例，並能夠手動創建元素。 現在，我正在嘗試從Json文件創建SVG元素。 元素是在頁面上創建的，但不會顯示在相應的坐標上。

在下面的示例中，您將看到所有矩形都位於同一位置，而它們應該分散在頁面中。 我真的看不出來為什么不起作用。

var svg = document.getElementById("mySVG"),
    xmlns = "http://www.w3.org/2000/svg";

 var c=[];
c.push(["valu1",13,240]);
c.push(["valu10",130,240]);
c.push(["valu2",120,250]);
c.push(["valu3",130,250]);
c.push(["valu4",140,54]);
c.push(["valu5",130,25]);

for(var i in c) {
   var myLoc = document.createElementNS(xmlns, "rect");
   var xPos =   c[i][1],
       yPos = c[i][2],
       id = c[i][0];

//to create a circle, for rectangle use rectangle
myLoc.setAttribute( "id", id);
myLoc.setAttribute( "cx", xPos);
myLoc.setAttribute( "cy",yPos);
myLoc.setAttribute( "height", 10);
myLoc.setAttribute( "width", 10);
myLoc.setAttribute( "stroke", "yellow");
svg.appendChild(myLoc);
}

這是更新的JSFIDDLE

Answer 1

SVG矩形使用x和y而不是cx和cy

 var svg = document.getElementById("mySVG"),
    xmlns = "http://www.w3.org/2000/svg";

 var c=[];
c.push(["valu1",13,240]);
c.push(["valu10",130,240]);
c.push(["valu2",120,250]);
c.push(["valu3",130,250]);
c.push(["valu4",140,54]);
c.push(["valu5",130,25]);

for(var i in c) {
   var myLoc = document.createElementNS(xmlns, "rect");
   var xPos =   c[i][1],
       yPos = c[i][2],
       id = c[i][0];

//to create a circle, for rectangle use rectangle
myLoc.setAttribute( "id", id);
myLoc.setAttribute( "x", xPos);
myLoc.setAttribute( "y",yPos);
myLoc.setAttribute( "height", 10);
myLoc.setAttribute( "width", 10);
myLoc.setAttribute( "stroke", "yellow");
svg.appendChild(myLoc);
}

演示

Answer 2

試試看： JSFIDDLE

您的ID不是var，還有一個問題rect包含X和Y而不是cx和cy

myLoc.setAttribute( "id", id);

創建動態ID

myLoc.setAttribute( "id", "id"+i);//here i is under loop