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

【问题标题】：Draw SVG Polygon from array of points in javascript从javascript中的点数组绘制SVG多边形
【发布时间】：2017-08-19 15:26:01
【问题描述】：

如果有这样的数组，（arr包括点）

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

我想用这个数组绘制 SVG 多边形。

起初，我认为这段代码可以，但事实并非如此。

<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;/">

请告诉我如何使用点数组制作多边形。请做一些示例代码。

【问题讨论】：

标签： javascript arrays html svg

【解决方案1】：

您可以使用 SVG DOM 来执行此操作，但除非您设置笔划，否则不会显示点形成直线的多边形。

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>

【讨论】：

非常有帮助的答案。一个让我难过的笔记，请确保使用原始 svg 对象而不是多边形创建点。