使用 setAttribute 添加时，svg 条形图不会显示 [重复]答案

【问题标题】：svg bar chart wont display when added using setAttribute [duplicate]使用 setAttribute 添加时，svg 条形图不会显示 [重复]
【发布时间】：2018-05-03 21:07:58
【问题描述】：

好的，所以我使用 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>

上面的代码做了一个类似于this的条形图

但我想使用 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)
}

但由于某种我无法解释的原因，即使它注入了正确的 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="228" height="72" width="95" transform="translate(300,0)" ></rect>
       <rect y="215" height="85" width="95" transform="translate(400,0)" ></rect>
   </svg>

因此，让代码实际进入 HTML 不是问题，只是矩形没有显示，尽管代码正确。

【问题讨论】：

标签： javascript html svg rect setattribute

【解决方案1】：

如果您调试rect，您将看到浏览器将其创建为HTMLUnknownElement 对象。这是因为 SVG 元素不是 HTML。试试这个：

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

【讨论】：