Javascript 使用setAttribute添加时，svg条形图不会显示

我用HTML创建了一个条形图，看起来像这样

   <svg width="500" height="300">
       <rect y="220" height="80" width="95" transform="translate(0,0)" ></rect>
       <rect y="200" height="100" width="95" transform="translate(100,0)" ></rect>
       <rect y="244" height="56" width="95" transform="translate(200,0)" ></rect>
       <rect y="180" height="120" width="95" transform="translate(300,0)" ></rect>
       <rect y="120" height="180" width="95" transform="translate(400,0)" ></rect>
   </svg>

<svg width="500" height="300">
       <rect y="220" height="80" width="95" transform="translate(0,0)" ></rect>
       <rect y="200" height="100" width="95" transform="translate(100,0)" ></rect>
       <rect y="244" height="56" width="95" transform="translate(200,0)" ></rect>
       <rect y="228" height="72" width="95" transform="translate(300,0)" ></rect>
       <rect y="215" height="85" width="95" transform="translate(400,0)" ></rect>
   </svg>

上面的代码生成了一个条形图，看起来像

但我想使用JavaScript使其动态化。所以我写了下面的脚本

var dataset = [80, 100, 56, 72, 85];

var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = (svgWidth / dataset.length);

var svg = document.getElementById('bar-js');
svg.setAttribute("width", svgWidth);
svg.setAttribute("height", svgHeight);


for(var i = 0; i < dataset.length; i++){
    var rect = document.createElement('RECT');
    rect.setAttribute("y", svgHeight - dataset[i])
    rect.setAttribute("height", dataset[i])
    rect.setAttribute("width", barWidth-barPadding)
    var translate = [barWidth * i, 0]
    rect.setAttribute("transform", "translate("+ translate +")")
    svg.appendChild(rect)
}

var数据集=[80100,56,72,85]；
var svgWidth=500，svghight=300，barPadding=5；
var barWidth=（svgWidth/dataset.length）；
var svg=document.getElementById（'bar-js'）；
setAttribute（“宽度”，svgWidth）；
setAttribute（“高度”，svghight）；
对于（var i=0；i

但是由于一些我无法解释的原因，即使它注入了正确的HTML，也没有显示任何内容

它创建的HTML如下所示

   <svg width="500" height="300">
       <rect y="220" height="80" width="95" transform="translate(0,0)" ></rect>
       <rect y="200" height="100" width="95" transform="translate(100,0)" ></rect>
       <rect y="244" height="56" width="95" transform="translate(200,0)" ></rect>
       <rect y="180" height="120" width="95" transform="translate(300,0)" ></rect>
       <rect y="120" height="180" width="95" transform="translate(400,0)" ></rect>
   </svg>

<svg width="500" height="300">
       <rect y="220" height="80" width="95" transform="translate(0,0)" ></rect>
       <rect y="200" height="100" width="95" transform="translate(100,0)" ></rect>
       <rect y="244" height="56" width="95" transform="translate(200,0)" ></rect>
       <rect y="228" height="72" width="95" transform="translate(300,0)" ></rect>
       <rect y="215" height="85" width="95" transform="translate(400,0)" ></rect>
   </svg>

---

因此，让代码真正进入HTML并不是一个问题，只是矩形没有正确显示在代码中。

如果调试

rect

，您将看到浏览器将其创建为

htmlUnknowneElement

对象。这是因为SVG元素不是HTML。试试这个：

document.createElementNS("http://www.w3.org/2000/svg", "rect");