Question

好的，所以我创建了一个使用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中并不是一个问题，只是尽管代码正确无法显示矩形，但这只是显示。

Answer 1

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

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

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

1 个答案: