从javascript中的点数组绘制SVG多边形

Question

if there is an array like this,(arr includes points)

arr = [ [ 0,0 ], 
             [ 50,50 ],
             [ 25,25 ], ];

i want to draw SVG polygon using this array.

At first, i think this code will be okay, but it isn't.

<polygon points="arr[0][0],arr[0][1] arr[1][0],arr[1][1] arr[2][0],arr[2][1]" style = "fill:lime; stroke:purple; stroke-width:3;/">

Please, let me know how to make polygon using array of points. Make some example code, please.

Answer 1

You can use the SVG DOM to do this although a polygon where the points form a straight line doesn't display unless you set a stroke.

 var svg = document.getElementById("svg"); var polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon"); svg.appendChild(polygon); var array = arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; for (value of array) { var point = svg.createSVGPoint(); point.x = value[0]; point.y = value[1]; polygon.points.appendItem(point); } 

 polygon { stroke: black; } 

 <svg id="svg"> </svg>