在之前的文章中我们介绍了利用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 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局。如果svg不是根元素，svg 元素可以用于在当前文档（比如说，一个HTML文档）内嵌套一个独立的svg片段 。 这个独立片段拥有独立的视口和坐标系统。
立即学习“前端免费学习笔记（深入）”；
所有SVG图像的根元素都是 元素。
登录后复制
路径
path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。SVG 元素用于绘制由直线，圆弧，曲线等组合而成的高级形状，带或不带填充。该 元素可能是所有元素中最先进，最通用的SVG形状。它可能也是最难掌握的元素。
所有带有元素的绘图都在d属性中指定。 d属性包含绘图命令。
d属性中的第一个绘图命令应该始终是move命令。在你可以画任何东西之前，你应该把虚拟笔移到某个地方。这是使用M命令完成的。
PHP中文网平台有非常多的视频教学资源，欢迎大家学习《HTML视频教程》！
以上就是使用HTML5 SVG绘制各种雪花图案的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2907447.html
