基于SVG的多边形图片网格布局

这是一款使用SVG来制作的多边形图片网格布局。该布局中通过SVG来将屏幕划分为多个多边形，每个多边形中设置一张背景图片，效果非常不错。

使用方法

在页面中引入snap.svg。

<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>                  
                

CSS样式

添加如下的一些CSS样式：

body {
  margin:0px;
  padding: 0px;
  background-color: #141414;
  overflow: hidden;
}

path{
  -webkit-transition:opacity 0.1s;
  cursor:pointer;
  opacity: 0.6;
}

path:hover{
  opacity: 1;
}
                

JavaScript

通过下面的js代码来构建多边形网格布局，其中对象team_rwby中放置的是每个多边形的背景图片。

window.onload = function(argument) {
    w = window.innerWidth,
    h = window.innerHeight;

    /* svg init */
    var paper = Snap(w, h);

    var team_rwby = {
      "ruby": "http://img.hb.aicdn.com/5d85ca4552076e9ebc84c9275794bebc1ce1dbf12498e-qPbnQc_fw658",
      "weiss": "http://img.hb.aicdn.com/ed55102bd05a0c95473cb958747091f2fcb3b98e94c0b-PC5EbL_fw658",
      "blake": "http://img.hb.aicdn.com/4736a6567a20b1c6d8af1ab22d827abd23bd7f044fd95-3dMoyr_fw658",
      "yang": "http://img.hb.aicdn.com/29125306a1a2cfd2d732a54b487d37b7372c36c8692ce-OwTMnW_fw658"
    };

    /* this polygons' array include coordinates and image's source  */
    var polygons = [];
    polygons.push({
      "coordinates": [
        [0, 0],
        [w * 0.6, 0],
        [0, h * 0.5]
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.ruby
    }, {
      "coordinates": [
        [0, h * 0.5],
        [w * 0.3, h * 0.25],
        [w * 0.55, h],
        [0, h]
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.yang
    }, {
      "coordinates": [
        [w * 0.3, h * 0.25],
        [w * 0.75, h * 0.55],
        [w * 0.55, h],
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.blake
    }, {
      "coordinates": [
        [w * 0.55, h],
        [w, 0],
        [w, h],
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.ruby
    }, {
      "coordinates": [
        [w * 0.6, 0],
        [w, 0],
        [w * 0.75, h * 0.55],
        [w * 0.3, h * 0.25],
      ],
      "strokeStyle": "black",
      "strokeWidth": 10,
      "image_src": team_rwby.weiss
    });

    for (var i = 0; i