我想使用javascript在svg中绘制线条。我有多边形，我想使用for循环绘制内部线条，当它在该形状中变满时将完成。我试过，但渲染时线不能出现。
这是我的代码：
<div id="svgselect" style="width: 610px; height: 230px;">
<!-- background-color:red -->
<svg version="1.1" height="100%" width="100%">
<g transform="scale(1.5)" id="gmain">
<g id="P17" transform="translate(25,0)">
<polygon class="line" points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon class="line" points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon class="line" points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B17"></polygon>
<polygon class="line" points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon class="line" points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">17</text>
</g>
<g id="P16" transform="translate(50,0)">
<polygon class="line" points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon class="line" points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon class="line" points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B16"></polygon>
<polygon class="line" points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon class="line" points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">16</text>
</g>
<g id="P15" transform="translate(75,0)">
<polygon class="line" points="5,5 15,5 15,15 5,15" fill="white" stroke="navy" stroke-width="0.5" id="C" opacity="1"></polygon>
<polygon class="line" points="0,0 20,0 15,5 5,5" fill="white" stroke="navy" stroke-width="0.5" id="T" opacity="1"></polygon>
<polygon class="line" points="5,15 15,15 20,20 0,20" fill="white" stroke="navy" stroke-width="0.5" id="B" opacity="1" class="B15"></polygon>
<polygon class="line" points="15,5 20,0 20,20 15,15" fill="white" stroke="navy" stroke-width="0.5" id="R" opacity="1"></polygon>
<polygon class="line" points="0,0 5,5 5,15 0,20" fill="white" stroke="navy" stroke-width="0.5" id="L" opacity="1"></polygon>
<text x="6" y="30" stroke="navy" fill="navy" stroke-width="0.1" style="font-size: 6pt;font-weight:normal">15</text>
</g>
</g>
</svg>
</div>
脚本：
var group = evt.target.parentNode;
// Get the bounding box of the group
var bbox = group.getBBox();
// Add a triangle to the group
var svgns = "http://www.w3.org/2000/svg";
var shape = document.createElementNS(svgns, "polygon");
var line = document.createElementNS(svgns, "line")
shape.setAttribute("points", "0,0, 0,20, 20,20, 20,0");
shape.setAttributeNS(null, "fill", "none");
shape.setAttributeNS(null, "stroke", "black")
shape.setAttributeNS(null, "stroke-width", 2.5);
line.setAttribute('id','line');
line.setAttribute('x1','3');
line.setAttribute('y1','0');
line.setAttribute('x2','3');
line.setAttribute('y2','20');
line.setAttribute("stroke", "black");
var xPos = bbox.x ;
var yPos = bbox.y ;
shape.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
line.setAttribute("transform", "translate(" + xPos + "," + yPos + ")");
group.appendChild(shape);
for (a=0; a >= 20 ; a+3){
group.appendChild(line);
}
https://jsfiddle.net/nanadia/rq3L1axv/4/
非常感谢