使用用户定义的 SVG 多边形
Working with SVG polygon defined by user
我想获取多边形的边数并相应地制作多边形。 有什么方法可以让我获取多边形的边数并根据它制作 SVG 多边形。 我可以这样做吗??
您可以使用 svg polygon
元素创建 svg 多边形,您需要计算的只是多边形的顶点。假设你想创建一个正多边形(否则有无限多边形 n
边,顶点可以计算为:
var vertices = [];
for(var i = 1; i <= n; i++) {
vertices.push({
x : Math.sin(2 * Math.PI * i / n),
y : Math.cos(2 * Math.PI * i / n)
});
}
function makePolygon(posX, posY, numSides, size)
{
var points = [];
for (var i = 0; i < numSides; i++) {
points.push(posX + size * Math.sin(2 * Math.PI * i / numSides));
points.push(posY + size * Math.cos(2 * Math.PI * i / numSides));
}
// Create a polygon element
var poly = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
poly.setAttribute("points", points.join(','));
// Add it to the SVG
document.getElementById("mysvg").appendChild(poly);
}
makePolygon(250,250, 9, 200);
polygon {
fill: yellow;
stroke: blue;
stroke-width: 10;
}
<svg id="mysvg" width="500" height="500"></svg>