使用Snap.svg创建视差背景

Question

我使用snapsvg创建了GameManagerModel.findByIdAndUpdate( game._id, {$setOnInsert: {user_requests:[]}}, {upsert: true, new: true}, function(err, gameMgr) { console.log( gameMgr ); gameMgr.addUserRequest( newRequest ); } ); 。我打算将此svg用作视差背景的一部分。我使用snapsvg作为视差背景的方法是否正确？

svg

var s = Snap("#svgout");
s.attr({
  viewBox: "0 0 600 100"
});

//lets draw 2 rects at position 100,100 and then reposition them

var r = s.rect(100, 100, 100, 100, 20, 20).attr({
  stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});

var r = s.rect(10, 10, 100, 100, 20, 20).attr({
  stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});

var r = s.rect(200, 10, 100, 100, 20, 20).attr({
  stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});

var r = s.rect(300, 100, 100, 100, 20, 20).attr({
  stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});

var r = s.rect(400, 10, 100, 100, 20, 20).attr({
  stroke: '#123456','strokeWidth': 20,fill: 'red','opacity': 0.2
});

#svgout {
  width: 100%;
}
#about {
  min-height: 200px;
  height: 200px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
}
#about svg {
  height: 200px;
  position: absolute;
  text-align: center;
  width: 100%;
}

working fiddle