教你五分钟入门使用html5 svg绘制图形

跟着步骤学习，耐心点好么，不要只看图不看文字，只看图5天都学不会。
我在工做中用不到h5绘图，因此我是个小菜鸟。但我始终有一种迷之信念，任何已经存在的东西学一下就会了。
因此恰好，我顺即可以讲一下个人学习步骤

1.我首先下了一个demo

感谢全部爱分享的程序员。
挑选demo的时候要注意，不能只挑选酷炫的，难易程度要根据本身的水平去选择。
我选了一个生日蛋糕的demo

2.看demo目录文件

固然起初demo下载下来目录结构内容不少，有js啊什么的，把不用的都须要清理掉，当剩下这三个文件的时候，个人心情是愉悦的。

reset.css 的内容

看了下是基础的css配置，就以为so easy

style.css的内容

是一些动画，就以为更容易了

index.html

由于没接触过，看到这些内容我是懵逼的，是不开心的，但又特么是愉悦的，由于我只要看懂这些就行了

3.搞懂svg究竟是什么鬼

其实这样学习有一点本末倒置的感受，但我仍是习惯先勾起本身的兴趣跟欲望，毕竟欲望是魔鬼。

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每一个元素都是可用的。您能够为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每一个被绘制的图形均被视为对象。若是 SVG 对象的属性发生变化，那么浏览器可以自动重现图形。
特色：
　不依赖分辨率
　支持事件处理器
　最适合带有大型渲染区域的应用程序（好比谷歌地图）
　复杂度高会减慢渲染速度（任何过分使用 DOM 的应用都不快）
　适合游戏应用

4.svg下的属性学习

svg不一样于canvas，提供了不少基本形状

矩形 - rect元素/圆 - circle元素/椭圆 - ellipse元素/直线 - line元素/折线 - polyline元素/多边形 - polygon元素/路径 - path元素

能够看到蛋糕的最下面一层是个矩形，很容易看明白意思，就很少说了

重点须要说一下蛋糕用到的最多的
路径 - path元素

看代码 属性d 应该就是绘图了。

不过须要注意的事情是，每个指令还有大小写的功能的区分哦，这点很重要，哈哈。
https://developer.mozilla.org...
MDN上面有关于d的详解
很详细还有分步骤解说，很适合刚学习的，能够去看看。

5.最后须要加入动画

看着代码是否是也很容易啊，就是须要几个动画关键帧处理。
over 了～
ps：早睡早起，常作运动，多与异性交朋友～

宣传下个人订阅号
按期推送

• 前端相关技术

• 听，某人在讲故事哄你睡觉了系列

• 黑，程序员漫画系列

• 程序员天生爱分享系列