Javascript SVG动画：创建所有多边形的数组，应用ID，并分别设置它们的动画

我正在尝试创建一个模式生成器，并且正在使用一个类似于被子的SVG文件，其中包含大约400个小多边形。我想用所有这些多边形填充一个数组，迭代给每个多边形一个唯一的编号id，然后给它们设置动画。我知道这可能是一个太大的文件，动画可能会很慢…我只是想试试

JS，其中唯一真正的DOM引用是“polygon”和coult的SVG id：
$（文档）.ready（函数（）{
var rC=randomColor（{count:140}）；//初始化随机颜色生成器
var coult=Snap.select（“#coult”）；//告诉Snap查看名为coult的SVG。
var allPolys=new Array（）；//设置空数组
var foundPolys=document.getElementsByTagName（“多边形”）；//获取DOM中的所有多边形
allPolys.push（foundPolys）；//将它们推入空数组
console.log（allPolys）；//确保它已进入（HTMLCollection w/#）
var numPolys=allPolys.length；//获取数组长度
//allPolys现在是所有多边形的数组woop woop！
函数snow（）{
对于（i=0；我这里有个问题吗？对不起，啊，是的！我实际上找到了一个解决办法，就是将Illustrator中的每个多边形分组，然后将它们全部解组到单独的层中，这将为它们提供唯一的层ID。当时的问题是：如何使用javascript将单个ID应用于每个SVG组件？
JS below, in which the only real DOM reference is to "polygon" and the SVG id of quilt:
$(document).ready(function(){
  var rC = randomColor({count:140}); //init random color generator
  var quilt = Snap.select('#quilt'); //tell snap to look at the SVG called quilt.

  var allPolys = new Array(); //set up empty array
  var foundPolys = document.getElementsByTagName("polygon"); //get all the polygons in the DOM
  allPolys.push(foundPolys); //push them into the empty array
  console.log(allPolys); //make sure it went in (HTMLCollection w/ #)
  var numPolys = allPolys.length; //get the array length
//allPolys is now an array of all the polygons woop woop!


function snow() {
  for (i = 0; i <= numPolys; i++) { //iterate thru dem polys
    return allPolys[i].id = 'tri-' + i; //give them unique ideas (tri-1, tri-2 etc)
    var flakeId = flakes[i].id; //set their id as a variable
    console.log(flakeId);
    var flake = flakes.select(flakeId); // Select each individual flake from our list
    var cx = flake.getBBox().cx; // Get its initial coordinates
    var cy = flake.getBBox().cy;
    animateFlake(flake, cx, cy); // Send it to be infinitely animated
 } //eachPoly
 }//snow

function animateFlake(flake, cx, cy){
  var  $scroller = ($(window).scrollTop()/2).toFixed(1),
  timing = $scroller * 140;// Random transition time between times we specify
  var flakeint = flake.attr({ transform:'0 0'}); // Reset the flake's position to behind the cloud
  var deg = getRandomArbitrary(-360,360); // Random rotation (allows it to go either direction)
  // Animate the flake and do a new animation for it when it's done (repeat this function)
  flake.stop().animate({transform: 't0 200 r'+deg+' '+cx+' '+cy}, timing, function(){ animateFlake(flake, cx, cy);});
  if ($scroller <=0) {
  flake.stop();
 }
   }
$(window).scroll(function(){
 var $percentageComplete = (($(window).scrollTop()/($("html").height()- $(window).height()))*100),
 $scroller = $(window).scrollTop()*0.7,
 $scrollsex = $scroller / 100,
 $tileTop = $(".tiles").offset().top + 50,
 $wH = $(window).height(),
  if ($scroller <= $tileTop) { //if the amount you've scrolled is less than ~ the div height then keep animating this left.
   $(".tileGo").css("-webkit-transform","rotate(" + $scroller + "deg)").animate({"left":$scroller}, $scrollsex);

 snow();
 }
 // Lets us get random numbers from within a range we specify. From MDN docs.
  function getRandomArbitrary(min, max) {
   return Math.random() * (max - min) + min;
  }

});