SVG动画：创建所有多边形的数组，应用ID，并单独为它们设置动画

Question

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

Here's the codepen: http://codepen.io/ferret/pen/emeXpg

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;
  }

});