3
저는 SVG을 실험 해본 결과 얻은 데이터에 따라 동적으로 SVG 요소에 요소를 삽입하려고합니다.동적으로 항목을 SVG 요소에 삽입하십시오.
데이터에서 두 행과 각 행에 5 개의 열이 있습니다.
SVG 요소에 (2 * 5) 항목 (rect, polygon 등)을 그려야합니다.
예 : #은 svg 요소 경계를 나타냅니다.
########### #######
#1 2 3 4 5# #12345#
#1 2 3 4 5# #12345#
########### #######
rect polygon
나는 rect를 해결할 수 있지만, 그러나, 다른 모양에 대해 이동하는 방법을 이해 할 수없는 것.
해결 방법을 알려주세요. 감사.
참고 : 괜찮 일부 라이브러리를 사용하는 것이 도움이 될 수 있다면 기존 라이브러리를 사용하는 경우에도 가능하면 내가 알고하지 않기 때문에, 추천 바랍니다.
Here은이를위한 도구입니다.
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>
자바 스크립트 : 데이터를 기반으로
SVG 요소를 삽입// 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);
}
}