Javascript Svg和快照基础

有什么线索可以让这更简单，这样我就可以轻松地更新值？样本：

for (var i = 0; i < 10; i++) {
var x = 40 * i;
  for (var t = 0; t < 8; t++) {
   var y = 40 * t,
   rectBg = canvas.rect(x,y,30,30);
    if (x === 0 && y == 160 ||
       ..
        x == 360 && y == 280) {
     rectBg.attr({
       fill: '#DF1279'
     });
    } else if (x === 0 && y == 120 ||
             ..
               x == 360 && y == 200) {
      rectBg.attr({
       fill: '#F3B7D3'
  }); 
   } else {
     rectBg.attr({
       fill: '#e8e8e8'
  }); 
   }
};

})

---

设法使它工作。毕竟这很简单：

var canvas = Snap($(window).innerWidth() , 500 ),
  squareSize = 30,
  squareSpace = 10,
  xSize = 10,
  ySize = 8,
  frontPosition = [4,5,5,3,4,3,5,3,2,2],
  backPosition = [5,6,6,5,5,5,6,5,3,3];  
for (var i = 0; i < xSize; i++) {  
var x = (squareSize + squareSpace) * i;
  for (var t = 0; t < ySize; t++) {
    var y = (squareSize + squareSpace) * t,
    rectBg = canvas.rect(x,y,squareSize,squareSize);          
    if (y >= (ySize-frontPosition[i]) * (squareSize + squareSpace) ) {
      rectBg.attr({
        fill:  '#DF1279'
      });
     } else if (y >= (ySize-backPosition[i]) * (squareSize + squareSpace) ) {
       rectBg.attr({
         fill: 'pink'
       }); 
      }
    else {
       rectBg.attr({
         fill: '#e8e8e8'
       });
    }
    }
  }

---

做一个函数来做它。