在SVG元素中动态插入项目

我一直在尝试SVG，并希望根据获得的数据将元素动态插入SVG元素中。

比方说，在数据中，我有2行，每行有5列
我需要在SVG元素（rect、polygon等）中绘制10个^（2*5）项
例如：#代表svg元素边界。

###########             #######
#1 2 3 4 5#            #12345#
#1 2 3 4 5#           #12345#
###########          #######
  rect               polygon

我可以解决rect，但似乎无法理解如何处理其他形状。

你能帮忙解决这个问题吗。谢谢

注意：如果使用某些库有帮助，请推荐，因为我不知道使用现有库是否可行。

这是一把小提琴。以下是在rect中填充元素的代码：

SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="138.64612"
   height="214.38011"
   id="svg4796">
  <defs
     id="defs4798" />
  <metadata
     id="metadata4801">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-132.1123,-309.24939)"
     id="layer1">
    <rect
       class="fill_me"
       width="135.72713"
       height="87.295868"
       x="134.5313"
       y="309.74939"
       id="rect5355"
       style="fill:#040404;fill-opacity:1;stroke:#ffffff;stroke-opacity:1" />
    <polygon
       class="fill_me"
       style="fill:#040404;fill-opacity:1;stroke:#848484;stroke-width:0.75"
       transform="matrix(0.939298,0,0,0.90867846,28.384527,198.27875)"
       id="cat_0000000051"
       points="148.2,240.301 133.1,273.6     110.8,325.334 228.133,357.667 239.899,269 148.2,240.301  " />
  </g>
</svg>

JavaScript：

// Get the required elements, and the attributes for the item to be filled.
var svg = document.querySelectorAll('svg')[0];
var block = svg.getElementsByClassName('fill_me')[0];
var b = {
    width : Math.floor(block.getBBox().width),
    height : Math.floor(block.getBBox().height),
    posX : Math.floor(block.getBoundingClientRect().left),
    posY : Math.floor(block.getBoundingClientRect().top)
};
var drawShape = function (tag, attrs) {
    var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (var i in attrs)
        el.setAttribute(i, attrs[i]);
    return el;
};
// This will create a group in which the items will be filled.
var grp = drawShape('g');
svg.appendChild(grp);
// this is the data, according to which the block needs to be filled.
var items = ['xava|xav2|xav3|xav4|xav5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|x2a4', 'xvvv|x2v2|xav3|xav4|xav5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xav3|xav4|xav5|xav6|xav7|xav8|x2v9|x2av|x2aa|x2a2|x2a3|x2a4', 'xvvv|xvvv|x2v3|x2v4|x2v5|x2v6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|x2v4|x2v5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|x2v5|xav6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|x2v6|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xav7|xav8|xav9|xaav|xaaa|xaa2|xaa3|xaa4', 'xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|xvvv|x2v8|x2v9|x2av|xaaa|xaa2|xaa3|xaa4'];
var rowSize = items[0].split('|').length;   // pick the first one, since all of them have the same length
var colSize = items.length;
var itemSize = {
    width : Math.floor(b.width / rowSize),
    height : Math.floor(b.height / colSize)
};
// For each row!
for (var i = 0; i < colSize; i++) {
    var fil = items[i].split('|');
    // For each column within row
    for (var j = 0; j < fil.length; j++) {
        var draw = drawShape('circle', {
            r: itemSize.width/3,
            cx: b.posX + j * itemSize.width + itemSize.width/2,
            cy: b.posY + i * itemSize.height + itemSize.height/2
        });
        if (j === 0 || fil[j] === 'x2v5' || fil[j] === 'x2v9')
            continue;
        grp.appendChild(draw);
    }
}