使用HTML5 SVG绘制各种雪花图案
在之前的文章中我们介绍了利用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片段；然后使用多个
标签绘制图案路径 -
第一种雪花图案
图案越复杂，需要的
-
第二种雪花图案
-
第三种雪花图案
-
第四种雪花图案
-
第五种雪花图案
-
第六种雪花图案
-
第七种雪花图案
-
第八种雪花图案
-
第九种雪花图案
-
第十种雪花图案
-
第十一种雪花图案
-
第十二种雪花图案
-
第十三种雪花图案
-
第十四种雪花图案
-
第十五种雪花图案
-
第十六种雪花图案
-
第十七种雪花图案
-
第十八种雪花图案