Svg 和 snap 基础知识

【问题标题】：Svg and snap basicsSvg 和 snap 基础知识
【发布时间】：2014-10-14 14:58:29
【问题描述】：

任何线索我怎样才能让这更简单，所以我可以轻松地更新值？示例：

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

};

http://codepen.io/ricnunes/pen/GEHpD

【问题讨论】：

制作一个函数来完成它。

标签： javascript svg snap.svg

【解决方案1】：

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

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

【讨论】：