关于使用svg构建六边形蜂巢列表的方式

由于项目需求，需要在页面中画出一套蜂巢排版格式的列表。在经过网上的一番查阅资料，发现大多六边形的画法都是通过div覆盖由旋转的菱形遮掩为六边形。这种六边形虽然可以满足一些基本的需求，但我暂时没有想到如何满足我想要的边框动态效果。最后寻觅下发现了一款适合的样式，在此基础上做出样式方面的改动，变为符合我需求的蜂巢列表。作为一个前端新手，内容如有错误请多指正，谢谢大家。

参考地址：

这里主要是通过svg的<path>标签去绘制边框路径，然后使用<text>插入单行文本，使用<foreignobject>插入可换行文本。

1.通过svg的x y width height四个参数构建svg实际占据的面积和位置。比如

<svg x="0" y="0" height="100%" width="100%">

就是占据了外层<li>的全部面积，这样做的好处是可以后续通过控制<li>的大小来直接控制svg的整体大小，也可以写具体的px来定位位置。

2.通过svg的viewbox属性来设置内部的具体尺寸比例。比如

  <li class="hex">    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">      <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />      <text class="time" x='104' y='60' style='dominant-baline:middle;text-anchor:middle;'>        10h      </text>      <foreignobject x='4' y='80' width="200" height="85">          <p class="title">abc-activiti-rver</p>      </foreignobject>      <text class="num" x='104' y='180' style='dominant-baline:middle;text-anchor:middle;'>        1个实例      </text>    </svg>  </li>

这里的viewbox=“0 0 208 240”说白了其实就是从svg的最左上(0,0)坐标的位置到最右下(208,240)坐标的，内部横向划分207次纵向划分239次的一个网格状区域。这样当我们想要将svg的任意子组件设置位置时，只需要给与指定的x y 即可。同时<path>的d属性也是通过这个网格区域来定位描点位置的。

3.通过<path>的d属性来进行边框描绘。d属性的写法有多种，不必纠结于某种写法，能实现即可。比如本次实现我使用的是d=”m 104,1 205,60 205,180 104,237 3,180 3,60 z”即m代表开始，每一个x,y代表一个点，默认是直线连接，最后z结尾，会自动形成闭环路径。

4.通过<text>写一些简短的问题，其中行内样式dominant-baline设置文本垂直居中，text-anchor设置文本水平居中。过长的文本不会换行，所以要使用下面这个标签。

5.通过<foreignobject>嵌入xhtml元素，用以防止较长的文本内容，对标签设置了宽高后，内部元素可进行换行。

html代码部分

<ul>  <li class="hex">    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">      <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />      <text class="time" x='104' y='60' style='dominant-baline:middle;text-anchor:middle;'>        10h      </text>      <foreignobject x='4' y='80' width="200" height="85">          <p class="title">abc-activiti-rver</p>      </foreignobject>      <text class="num" x='104' y='180' style='dominant-baline:middle;text-anchor:middle;'>        1个实例      </text>    </svg>  </li>  <li class="hex"&g刘禹锡的诗有哪些t;    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex">    <svg class="red" x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex">    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex">    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex">    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex"&井冈山精神gt;    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex">    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex">    <svg class="yellow" x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 104,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li>  <li class="hex">    <svg x="0" y="0" viewbox="0 0 208 240" height="100%" width="100%">        <path class="path" d="m 10廉政述职报告4,1 205,60 205,180 104,237 3,180 3,60 z" />    </svg>  </li><ul>

然后就是css部分，里面用到的不常见样式的具体用法做了简单的文字描述，不太明白的可以尝试百度一下，大多都有专门的图文描述，这里就不再做赘述了

    ul,p {      margin: 0;      padding: 0;    }    ul {      list-style: none;      border: 1px solid #333333;      overflow: hidden;    }    li.hex {      float: left;      font-size: 20px;    }    svg {      width: 100%;      color: #3bc292;    }    svg path {      fill: transparent; /* 内部透明填充色 */      stroke: #3bc292; /* 边框色 */      stroke-width: 6; /* 边框宽度 */      stroke-linecap: round; /* 描边端点表现形式 */      stroke-linejoin: round; /* 描边转角的表现方式 */      stroke-miterlimit: 4;      stroke-dasharray: 20; /* 创建虚线，20px实线，20px虚线重复 */      animation: dash 5s linear infinite; /* 动画名 每次速度 匀速 无限次 */      transition: 0.3s;      -moz-transition: 0.3s;    /* firefox 4 */      -webkit-transition: 0.3s;    /* safari 和 chrome */      -o-transition: 0.3s;    /* opera */    }    svg text {      fill: #3bc292; /* 文本填充色 */      transition: 0.3s;      -moz-transition: 0.3s;    /* firefox 4 */      -webkit-transition: 0.3s;    /* safari 和 chrome */      -o-transition: 0.3s;    /* opera */    }    svg text.time {      font-size: 0.8em;    }    svg p.title {      text-align: center;      font-size: 1.5em;      transition: 0.3s;      -moz-transition: 0.3s;    /* firefox 4 */      -webkit-transition: 0.3s;    /* safari 和 chrome */      -o-transition: 0.3s;    /* opera */    }    svg text.num {      font-size: 0.8em;    }    svg:hover path {      stroke: #3bc292;      fill: #69c2a3;    }    svg:hover text, svg:hover p.title {      fill: #ffffff;      color: #ffffff;    }    svg.red path 魏晋{      stroke: #f56f6f;      animation-play-state: paud;    }    svg.red:hover path {      fill: #f56f6f;    }    svg.yellow path {      stroke: #f5b140;      animation-play-state: paud;    }    svg.yellow:hover path {      fill: #f5b140;    }    @keyframes dash {      to {        stroke-dashofft: 120; /* 虚线在原路径下的偏移量 */      }    }    /*** spacing and sizing *****************************************************************/    @media (min-width: 1401px) {      .hex {        width: 12.5%;        margin: 0 0.5%;      }      .hex:nth-child(13n+1) {        margin-left: 2.5%;      }      .hex:nth-child(13n+8),.hex:nth-child(13n+9),.hex:nth-child(13n+10),.hex:nth-child(13n+行为主义11),.hex:nth-child(13n+12),.hex:nth-child(13n+13) {        margin-top: -3%;        margin-bottom: -3%;      }      .hex:nth-child(13n+8) {        margin-left: 9.25%;      }    }    @media (max-width: 1400px) and (min-width: 1201px){      .hex {        width: 15%;        margin: 0 0.5%;      }      .hex:nth-child(11n+1) {        margin-left: 2.5%;      }      .hex:nth-child(11n+7),.hex:nth-child(11n+8),.hex:nth-child(11n+9),.hex:nth-child(11n+10),.hex:nth-child(11n+11) {        margin-top: -3.6%;        margin-bottom: -3.6%;      }      .hex:nth-child(11n+7) {        margin-left: 10.5%;      }    }    @media (max-width: 1200px) and (min-width: 901px){      .hex {        width: 19%;        margin: 0 0.3%;      }      .hex:nth-child(9n+1) {        margin-left: 1%;      }      .hex:nth-child(9n+6),.hex:nth-child(9n+7),.hex:nth-child(9n+8),.hex:nth-child(9n+9) {        margin-top: -4.6%;        margin-bottom: -4.6%;      }      .hex:nth-child(9n+6) {        margin-left: 10.5%;      }    }    @media (max-width: 900px) and (min-width: 601px) {      .hex {        width: 24%;        margin: 0 0.3%;      }      .hex:nth-child(7n+1) {        margin-left: 0.8%;      }      .hex:nth-child(7n+5),.hex:nth-child(7n+6),.hex:nth-child(7n+7) {        margin-top: -6%;        margin-bottom: -6%;      }      .hex:nth-child(7n+5) {        margin-left: 13.1%;      }    }    @media (max-width: 600px) {      .hex {        width: 30%;        margin: 0 1%;      }      .hex:nth-child(5n+1) {        margin-left: 3%;      }      .hex:nth-child(5n+4),.hex:nth-child(5n+5) {        margin-top: -6.5%;        margin-bottom: -6.5%;      }      .hex:nth-child(5n+4) {        margin-left: 19%;      }    }