我一直在试验SVG，并想根据我得到的数据动态地将元素插入到 SVG 元素中。
所以说，在数据中，我有 2 行，每行 5 列。
我需要在 SVG 元素（,等）中绘制 10 (2*5)个项目。
例如：表示 svg 元素边界。rectpolygon#
########### #######
#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);
}
}