Javascript 为SVG多边形设置动画

我编写了绘制多边形的代码：

  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', '100%');
  svg.setAttribute('height', window.innerHeight);
  document.querySelector('#bg').appendChild(svg);

for(var x = 0; x < polygons.length; x++){
  var polygon = document.createElementNS(svg.namespaceURI, 'polygon');
  polygon.setAttribute('points', polygons[0 + x]);
  polygon.setAttribute('fill', polygons[0 + x][1]);
  svg.appendChild(polygon);
}

var svg=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
setAttribute（'width'，'100%'）；
setAttribute（'height'，window.innerHeight）；
document.querySelector（'#bg'）.appendChild（svg）；
对于（var x=0；x

我的多边形点完整代码：

我想制作与此动画类似的多边形动画：

如何设置多边形的动画

你可以

• 调用动画函数以根据需要操纵坐标值
• 将它们转换为字符串，例如使用

  .join（）

• 将生成的字符串作为其

  点

  属性值发送回多边形，重新绘制形状（正如最初创建形状时所做的那样），然后
• 使用动画功能，完成后，使用

  requestAnimationFrame

  以合理的内置时间延迟再次调用自身

下面的代码片段给出了可以做什么的基本想法

（请注意，在我的示例中，我重新定义了数组

多边形

，因此它与您的不同，但在本示例中，这是为了简单起见。）

var svg=document.getElementsByTagName（“svg”）[0]；
var polygons=[]，numSteps=100，stepNum=0；
变量坐标=[
[40, 20, 80, 20, 80, 60, 40, 60],
[140, 20, 180, 20, 160, 50]
];
对于（var x=0；x
我尝试设置我的点的动画，但我没有；I don’我不知道如何声明我的观点：你能帮我吗？我想知道的关键是你是否知道哪些观点是重复的。在任何情况下，更改以下内容：
var pts=[[1365.6,93.9]，[1304.1，-8.7]，[1926.8，-4.7]，[1570.1237.9]，[1824.2158.8]，[1491.3299.6]，[1926.8267.9]
var polyPts=[[0,1,2]，[3,2,0]，[3,2,4]，[3,0,5]，[2,4,6]
并将html更改为
，不过您必须更改此项才能添加更多形状。我想你可能很难手动完成这一切。您能否以编程方式（例如随机）创建点和形状？这是一个完全不同的问题。我想给这幅图像设置动画：你知道如何轻松地设置动画吗？动画？对容易吗？嗯……你将不得不做我在上面最近对你的评论中所做的同样的事情。i、 e.您必须遍历多边形点，删除所有重复项，将所有这些唯一点放在
pts
数组中，返回多边形，找出每个多边形需要
pts
数组中的哪些点，并将这些点参考号放在
polyPts
数组中。然后你就可以用我在回答中的例行公事了。这可能是一个相当多的工作，但这是我能想到的唯一方法，从你目前拥有的多边形开始。哦，我不知道如何制作：（（你能在我的示例中为3-4个多边形设置动画吗？