六边形蜂巢样式 svg方式写法初见_svg画六边形-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_491407692/article/details/128455473

本文介绍了一种使用SVG和CSS创建六边形蜂巢布局的方法，无需JavaScript。通过定义SVG多边形坐标，结合CSS样式，实现了蜂巢的图形效果。文章详细解析了坐标计算、图层叠加以及阴影效果的实现，还提到了通过hover伪类为六边形添加交互。同时，鼓励读者进一步探索SVG的其他特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

蜂巢图案样式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)"