这是一款使用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 < polygons.length;="" i++)="" {="" make_polygon_layout(paper,="" polygons[i]);="" }="" }="" function="" make_polygon_layout()="" {="" paper="arguments[0];" polygon="arguments[1];" tempa="[];" for="" (var="" i="0;" i="">< polygon.coordinates.length;="" i++)="" {="" tempa[i]="polygon.coordinates[i];" }="" get="" largest="" and="" smallest="" x="" coordinate="" */="" tempa.sort(function(a,="" b)="" {="" return="" a[0]="" -="" b[0];="" });="" sx="tempA[0][0];" bx="tempA[tempA.length" -="" 1][0];="" get="" largest="" and="" smallest="" ycoordinate="" */="" tempa.sort(function(a,="" b)="" {="" return="" a[1]="" -="" b[1];="" });="" sy="tempA[0][1];" by="tempA[tempA.length" -="" 1][1];="" polygon.startpoint="[sX," sy];="" polygon.endpoint="[bX," by];="" polygon.width="polygon.endPoint[0]" -="" polygon.startpoint[0];="" polygon.height="polygon.endPoint[1]" -="" polygon.startpoint[1];="" var="" pattern="paper.image(polygon.image_src," 0,="" 0,="" polygon.width,="" polygon.height)="" .attr("preserveaspectratio",="" "xmidymid="" slice")="" .pattern({="" 'x':="" polygon.startpoint[0],="" 'y':="" polygon.startpoint[1],="" 'width':="" polygon.width,="" 'height':="" polygon.height="" }).attr('viewbox',="" "");="" var="" path="paper.path({" "d":="" make_path(polygon.coordinates),="" "strokewidth":="" polygon.strokewidth,="" 'stroke-linejoin':="" "round",="" 'stroke':="" polygon.strokestyle,="" "fill":="" pattern,="" });="" path.click(function(event)="" {="" });="" }="" function="" make_path()="" {="" d="M" ;="" coordinates="arguments[0];" for="" (var="" i="0;" i="">< coordinates.length;="" i++)="" {="" if="" (i="=" 0)="" {="" d="" +="coordinates[i][0]" +="" "="" "="" +="" coordinates[i][1]="" }="" else="" {="" d="" +="L" +="" coordinates[i][0]="" +="" "="" "="" +="" coordinates[i][1]="" }="" }="" return="" d="" +="" "z";="" }="">

在线预览    源码下载