本文介绍了一种使用SVG和CSS创建六边形蜂巢布局的方法，无需JavaScript。通过定义SVG多边形坐标，结合CSS样式，实现了蜂巢的图形效果。文章详细解析了坐标计算、图层叠加以及阴影效果的实现，还提到了通过hover伪类为六边形添加交互。同时，鼓励读者进一步探索SVG的其他特性。
蜂巢图案样式svg写法
先看效果图
代码一览
<style>
* {
margin: 0;
padding: 0;
}
.fuwu {
width: auto;
overflow: hidden;
background-color: #f9f9f9;
}
.fengchao {
width: 1038px;
margin: auto;
padding: 30px 0;
overflow: hidden;
}
/* 多段线的样式 */
polyline {
fill:none;
stroke:red;
stroke-width:1;
}
/* 多边形的样式 */
polygon {
fill:white;
}
</style>
-------
<body>
<div class="fuwu">
<div class="fengchao">
<!-- 蜂巢块 -->
<svg width="1038" height="300">
<!-- polygon：多边形，使用坐标定位 -->
<polygon points="52,0 0,30 0,90 52,120 104,90 104,30"/> <!-- 大数据 -->
<polygon points="208,90 156,120 156,180 208,210 260,180 260,120"/> <!-- APP开发 -->
<polygon points="364,180 312,210 312,270 364,300 416,270 416,210"/> <!-- 系统集成 -->
<polygon points="260,0 208,30 208,90 260,120 312,90 312,30"/> <!-- 综合布线 -->
<polygon points="364,0 312,30 312,90 364,120 416,90 416,30"/> <!-- 小程序 -->
<polygon points="572,0 520,30 520,90 572,120 624,90 624,30"/> <!-- 数据可视化 -->
<polygon points="728,90 676,120 676,180 728,210 780,180 780,120"/> <!-- 人脸识别 -->
<polygon points="832,90 780,120 780,180 832,210 884,180 884,120"/> <!-- 工作流引擎 -->
<polygon points="988,0 936,30 936,90 988,120 1040,90 1040,30"/> <!-- 物联网 -->
<!-- 需要添加阴影的六边形蜂巢添加一个filter滤镜属性 -->
<polygon points="104,90 52,120 52,180 104,210 156,180 156,120" filter="url(#yinying)"/> <!-- 运维监控 -->
<polygon points="312,90 260,120 260,180 312,210 364,180 364,120" filter="url(#yinying)"/> <!-- 微服务 -->
<polygon points="468,180 416,210 416,270 468,300 520,270 520,210" filter="url(#yinying)"/> <!-- 公众号 -->
<polygon points="468,0 416,30 416,90 468,120 520,90 520,30" filter="url(#yinying)"/> <!-- 图像分析 -->
<polygon points="624,90 572,120 572,180 624,210 676,180 676,120" filter="url(#yinying)"/> <!-- 智能网关 -->
<polygon points="884,180 832,210 832,270 884,300 936,270 936,210" filter="url(#yinying)"/> <!-- 舆情分析 -->
<polygon points="884,0 832,30 832,90 884,120 936,90 936,30" filter="url(#yinying)"/> <!-- web前端 -->
<!-- 文本信息 -->
<text x="28" y="66">大数据</text>
<text x="76" y="156">运维监控</text>
<text x="180" y="156">APP开发</text>
<text x="288" y="156">微服务</text>
<text x="334" y="246">系统集成</text>
<text x="446" y="246">公众号</text>
<text x="230" y="66">综合布线</text>
<text x="340" y="66">小程序</text>
<text x="440" y="66">图像分析</text>
<!-- 多行文本 -->
<text x="556" y="56">数据<tspan x="550" y="74">可视化</tspan></text>
<text x="594" y="156">智能网关</text>
<text x="696" y="156">人脸识别</text>
<text x="808" y="146">工作流<tspan x="816" y="166">引擎</tspan></text>
<text x="854" y="246">舆情分析</text>
<text x="854" y="66">web前端</text>
<text x="964" y="66">物联网</text>
<!-- 红色蜂巢线 -->
<!-- polyline：多段线，使用坐标定位 -->
<polyline points="104,210 156,180 208,210 260,180"/>
<polyline points="260,120 312,90 312,30 312,90 364,120"/>
<polyline points="312,210 364,180 416,210 468,180 520,210 520,270"/>
<polyline points="468,0 520,30 520,90 520,30 572,0 624,30"/>
<polyline points="728,90 780,120 780,180 780,120 832,90 884,120 936,90"/>
<!-- 阴影效果，即添加滤镜 -->
<defs>
<filter id="yinying" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic"></feOffset>
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0"></feColorMatrix>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="6"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<!-- <feOffset>属性值改为"SourceGraphic"理解为原图形的偏移 -->
<!-- <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色（这是原贴的解释，不是很懂） -->
<!-- <feGaussianBlur>元素的stdDeviation属性定义了模糊量 -->
<!-- feColorMatrix 的 matrix 是一个 4*5 的矩阵。前面 4 列是颜色通道的比例系数，最后一列是常量偏移。
values="0.1 0 0 0 0
0 0.1 0 0 0
0 0 0.1 0 0
0 0 0 0.1 0" -->
</svg>
</div>
</div>
</body>
这个蜂巢样式只用了html和css，没有用js，相对难度没有那么大，但也比较麻烦和繁琐
拆解
这个六边形蜂巢排列样式重点使用了svg标签，之前也简单百度过蜂巢样式，有用三个div组合的，也有用svg的，三个div组合起来的还没有尝试，有用过的大佬可以沟通交流一下；svg的排列，这里用到了坐标信息，在计算上也是一个不小的麻烦，但也有规律可循，嘛，先一起捋一遍吧：
1，添加svg标签，定义需要用到的宽度和高度，计算宽度就是横向蜂巢的宽度和空白相加，计算高度就是纵向蜂巢的高度和空白相加再减去重合的部分；也可以给一个大画布，完成后一点点减小成合适的大小；
<svg width="1038" height="300">
2，定义一个多边形，一个坐标一个点，多个点位相连成一个多边图形，“52,0”是起始坐标，“104,30”是结束坐标，多个坐标之间用空格隔开；
<polygon points="52,0 0,30 0,90 52,120 104,90 104,30"/>
SVG有一些预定义的形状元素，可被开发者使用和操作：
矩形 rect
圆形 circle
椭圆 ellipse
线 line
折线 polyline
多边形 polygon
路径 path
坐标起始点从svg标签定义的画布左上角开始，向右为x坐标，向下为y坐标；
这里可以在style里给蜂巢块添加一些样式：
fill：填充颜色
stroke：边框颜色
stroke-width：边框粗细（数字）
这里只罗列了常用的几个，其他待研究；
3，写完蜂巢格子后，再来添加红色的间隔装饰线，在图层认知里，先看到上面的图层，在看到下面的图层，在蜂巢代码这里，需要先写蜂巢块，再把装饰线的代码放在蜂巢块代码的下面，不然蜂巢块会遮挡装饰线；装饰线用了折线标签，如果用路径更麻烦，添加折线标签后，同样需要坐标，起始坐标和结束坐标，跟多边形不同的是，折线不会闭合成一个图形，多边形起始点和结束点连接起来；
<polyline points="104,210 156,180 208,210 260,180"/>
折线的坐标规则，样式和多边形一样，部分坐标可以复制多边形的坐标；
4，添加文字信息，文字跟装饰线一样，需要将代码写在蜂巢块代码的下面，不然蜂巢块会遮挡文字信息；文字信息使用text标签添加，不能直接在svg或polygon标签里面直接写文字或用p标签；文字也是用坐标来定位；
<text x="28" y="66">大数据</text>
文字坐标有点不同，文本信息的默认坐标x=“0” y=“0” 并不会完整出现在svg的画布内，需要在y坐标做一点偏移通常是10-15之间；即x=“0” y=“15” 这样，文字就会在画布的左上角，不会出画布；文字的颜色用fill进行定义，字号大小使用font-size来定义；
多行文字时，需要在text标签内添加一个tspan标签。来表示多行信息；
<text x="556" y="56">数据
<tspan x="550" y="74">可视化</tspan>
</text>
多行文本同样使用坐标信息来独立进行定位；
5，最后添加阴影效果，阴影效果不能使用常规的box-shadow或者text-shadow，在svg标签里，阴影使用 defs 和 filter 来定义；
filter 这里，x 和 y 貌似是可以没有的，如果其值不为零，可能出现图形和阴影都没有的尴尬境地；
fe0ffset 中，dx 和 dy 表示阴影的偏移值，通常阴影是有其他值的，我这里的是为了让阴影呈现一种外发光的效果，所以dx 和 dy的值我给了零，这样阴影就在蜂巢块正下方；
feGaussianBlur 中的 stdDeviation 的值是阴影的模糊大小值，太小了像描边，太大了比较生硬；
<defs>
<filter id="yinying" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic"></feOffset>
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0"></feColorMatrix>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="6"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
阴影的成分比较复杂，本人半吊子出身，也没有搞懂，有了解的大佬可以留言讲讲，此处代码完整为：
<defs>
<filter id="阴影" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
<feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0"/>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="6" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
defs 可以理解为我要添加滤镜；
filter 标签用来定义svg滤镜，元素id属性定义一个滤镜的唯一名称
feOffset属性值改为"SourceGraphic"理解为原图形的偏移
feColorMatrix过滤器是用来转换偏移的图像使之更接近黑色的颜色（这是原贴的解释，不是很懂）
feGaussianBlur元素的stdDeviation属性定义了模糊量
feColorMatrix 的 matrix 是一个 4*5 的矩阵。前面 4 列是颜色通道的比例系数，最后一列是常量偏移。
values="
0.1 0 0 0 0
0 0.1 0 0 0
0 0 0.1 0 0
0 0 0 0.1 0"
矩阵直接一脸蒙，我发现数值改为0.1之后，就是浅浅的模糊效果，有种蒙对的了感觉；
使用阴影或滤镜时，需要注意的是，尽量避免图形贴近svg的画布边缘使用阴影或者滤镜，阴影或滤镜不会出svg的画布，阴影的效果超出svg画布时，会比较生硬的给砍掉，本人在给蜂巢块添加阴影时，没有给最外边的两个蜂巢块添加阴影；
使用阴影时，还有一点比较有意思，我们在蜂巢块添加了 ‘ filter=“url(#yinying)” ’ 属性，添加了这个属性的蜂巢块就有阴影，但因为蜂巢块之间也是有图层关系的，表面上所有蜂巢都在一个平面，其实不然，蜂巢块是根据代码的前后来排列的，蜂巢块的代码越往后，蜂巢块在图层上就越高，如果，你给前面的蜂巢块添加了 ‘ filter=“url(#yinying)” ’ 这个蜂巢块会有阴影，但是它的阴影会被其他蜂巢块盖住，所以为了避免这种情况，也是为了突出蜂巢块的错落感，凸出感，我将所有添加阴影的蜂巢块代码都放在了蜂巢代码组的最后面，这样他们的图层是最高的，阴影会在其他蜂巢之上，错落感也就产生了；
6，补充说明，到这里蜂巢排列基本上是已经完成了，可能说只有形，没有意，至于意，那就看各位朋友怎么发挥了，可以在style里给polygon多边形添加一个hover，如：
<style>
polygon:hover{
fill: red;
}
</style>
鼠标移入六边形蜂巢块，蜂巢块就会变色为红色，但是鼠标移入到文字上，hover效果就没了，文字的层级比蜂巢块要高，遮挡了蜂巢块，就没办法触发hover；
综上所述，这是个相对比较简单的六边形蜂巢块排列样式，svg标签还有很多其他有趣的功能，本文都没有涉及，能力尚浅，有很多不懂的地方，欢迎多多留言沟通交流；
参考来源：
https://www.runoob.com/svg/svg-tutorial.html
愿你每天都有进步，不枉费你打开这个页面。
如有不对的地方，请指正。
扫一扫
1267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
