关于使用svg构建六边形蜂巢列表的方式
程序员文章站
2022-06-22 08:35:21
由于项目需求，需要在页面中画出一套蜂巢排版格式的列表。在经过网上的一番查阅资料，发现大多六边形的画法都是通过div覆盖由旋转的菱形遮掩为六边形。这种六边形虽然可以满足一些基本的需求，但我暂时没有想到如何满足我想要的边框动态效果。最后寻觅下发现了一款适合的样式，在此基础上做出样式方面的改动，变为符合我 ......
由于项目需求，需要在页面中画出一套蜂巢排版格式的列表。在经过网上的一番查阅资料，发现大多六边形的画法都是通过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-baseline:middle;text-anchor:middle;'>
10h
</text>
<foreignobject x='4' y='80' width="200" height="85">
<p class="title">abc-activiti-server</p>
</foreignobject>
<text class="num" x='104' y='180' style='dominant-baseline: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-baseline 设置文本垂直居中， 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-baseline:middle;text-anchor:middle;'>
10h
</text>
<foreignobject x='4' y='80' width="200" height="85">
<p class="title">abc-activiti-server</p>
</foreignobject>
<text class="num" x='104' y='180' style='dominant-baseline:middle;text-anchor:middle;'>
1个实例
</text>
</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="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">
<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 104,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: paused;
}
svg.red:hover path {
fill: #f56f6f;
}
svg.yellow path {
stroke: #f5b140;
animation-play-state: paused;
}
svg.yellow:hover path {
fill: #f5b140;
}
@keyframes dash {
to {
stroke-dashoffset: 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%;
}
}
上一篇： 树---二叉搜索树的第K个节点