使用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片段；然后使用多个标签绘制图案路径

• 第一种雪花图案

图案越复杂，需要的标签就越多

• 第二种雪花图案

• 第三种雪花图案

• 第四种雪花图案

• 第五种雪花图案

• 第六种雪花图案

• 第七种雪花图案

• 第八种雪花图案

• 第九种雪花图案

• 第十种雪花图案

  

  Viggle AI Video

  Powerful AI-powered animation tool and image-to-video AI generator.

  下载

• 第十一种雪花图案

• 第十二种雪花图案

• 第十三种雪花图案

• 第十四种雪花图案

• 第十五种雪花图案

• 第十六种雪花图案

• 第十七种雪花图案

• 第十八种雪花图案

大家可以直接复制以上代码，在本地进行运行演示。

这里给大家介绍几个关键的标签和属性：

• 元素

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。

立即学习“前端免费学习笔记（深入）”；

所有SVG图像的根元素都是

• 路径

path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG 元素用于绘制由直线，圆弧，曲线等组合而成的高级形状，带或不带填充。该 元素可能是所有元素中最先进，最通用的SVG形状。它可能也是最难掌握的元素。

所有带有元素的绘图都在d属性中指定。 d属性包含绘图命令。

d属性中的第一个绘图命令应该始终是move命令。在你可以画任何东西之前，你应该把虚拟笔移到某个地方。这是使用M命令完成的。

PHP中文网平台有非常多的视频教学资源，欢迎大家学习《HTML视频教程》！