在之前的文章中我们介绍了利用html5+css3动态画出一个线条笑脸的方法，感兴趣的可以点击链接进行查阅→《如何使用html5+css3动态画一个笑脸》。这次我们继续聊聊利用html5 svg绘制图案。
今天本文的主要内容是：利用HTML5 svg绘制各种雪花图案。
首先我们来了解一下什么是svg？
SVG是可伸缩矢量图形的缩写。它是一种图形格式，其中以XML指定形状。然后由SVG查看器呈现XML。如今，大多数Web浏览器都可以显示SVG，就像它们可以显示PNG，GIF和JPG一样。SVG用于二维矢量图形。
SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。
下面我们来看看使用HTML5 SVG如何绘制各种雪花图案。
首先设置整个页面的背景颜色、svg画布的大小、线条的颜色、
body {
background: #222;
margin: 0;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
svg {
width: 25vmin;
height: 25vmin;
}
.stroke {
fill: none;
stroke: #fff;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
}
然后就开始利用svg绘制各种雪花图案
定义svg标签，创建SVG图像的根元素，在当前文档内嵌套一个独立的svg片段；然后使用多个
标签绘制图案路径 第一种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
图案越复杂，需要的
第二种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第三种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第四种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第五种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第六种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第七种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第八种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第九种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
-
第十种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十一种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十二种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十三种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十四种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十五种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十六种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十七种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
第十八种雪花图案
<svg> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path></svg>
大家可以直接复制以上代码，在本地进行运行演示。
这里给大家介绍几个关键的标签和属性：
元素
SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。
所有SVG图像的根元素都是
<svg> </svg>
path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG
所有带有
PHP中文网平台有非常多的视频教学资源，欢迎大家学习《HTML视频教程》！
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
