UI前端-使用SVG拼水平六边形填充图文效果

之前用SVG做的一个六边形区块链效果：

完整贴码：

css文件：

html,
body {
    height: 100%;
    width:100%;background:url(images/06.png) no-repeat center;
    overflow:hidden;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
svg {
    height:100%;
    width:1100px;
    margin:0 auto;
    margin-top:-150px;
}
svg polygon{stroke-width:3;stroke:#fff;stroke-opacity:1;}
svg polygon:hover{stroke-width:0;stroke:#fff;stroke-opacity:1; cursor:pointer;}

body内容：

<svg version="1.1" viewBox="0 0 477 300">
<defs>
      <pattern id="patter-1" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none"  xlink:href="images/CRMjg.png">
        </image>
      </pattern>
          <pattern id="patter-2" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none" xlink:href="images/CRMsf.png">
        </image>
      </pattern>
          <pattern id="patter-3" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none"  xlink:href="images/zpd.png">
        </image>
      </pattern>
          <pattern id="patter-4" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none"  xlink:href="images/zcd.png">
        </image>
      </pattern>
          <pattern id="patter-5" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none"  xlink:href="images/89.png">
        </image>
      </pattern>
          <pattern id="patter-6" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none" xlink:href="images/yzf.png">
        </image>
      </pattern>
          <pattern id="patter-7" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none"  xlink:href="images/td.png">
        </image>
      </pattern>
          <pattern id="patter-8" height="1" width="1" patternContentUnits="objectBoundingBox">
        <image height="1" width="1" preserveAspectRatio="none" xlink:href="images/ycdd.png">
        </image>
      </pattern>
  </defs>  
    <polygon fill="#FFAB93" points="260,150 282,187 260,225 217,225 195,187 217,150" Onclick="alert('1')"/>
    <polygon fill="url(#patter-1)" points="347,150 325,112 346.5,74.5 390,74 412,111 390,150"  Onclick="alert('11')"/>
    <polygon fill="url(#patter-2)" points="390,150 412,187 390,225 347,225 325,187 347,150" Onclick="alert('1')"/>
    <polygon fill="url(#patter-3)" points="130,150 152,187 130,225 87,225 65,187 87,150"  Onclick="alert('2')"/>
    <polygon fill="url(#patter-4)" points="152,187 130,150 152,113 195,113 217,150 195,187" Onclick="alert('3')"/>
    <polygon fill="url(#patter-5)" points="22,187 0,150 22,113 65,113 87,150 65,187"  Onclick="alert('4')"/>
    <polygon fill="url(#patter-6)" points="152,262 130,225 152,187 195,187 217,225 195.5,262.5" Onclick="alert('5')"/>
    <polygon fill="url(#patter-7)" points="412,187 390,150 412,111 455,112 477,150 455,187"  Onclick="alert('6')"/>
    <polygon fill="url(#patter-8)" points="282,262 260,225 282,187 325,187 347,225 325,262"  Onclick="alert('7')"/>
          <text style="fill:#fff;font-size:12pt" x="223" y="195">8</text>
</svg>