从javascript中的点阵列中绘制SVG多边形 [英] Draw SVG Polygon from array of points in javascript

问题描述

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

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

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

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

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.

推荐答案

您可以使用SVG DOM执行此操作，尽管多边形位于除非你设置一个笔划，否则不会显示直线。

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>

这篇关于从javascript中的点阵列中绘制SVG多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！