0.前言
今天下午，一个哥们问我，SVG 是什么东西，这个东西怎么用？
我之前对这个东西的认知就只停留在这个东西跟 Canvas 差不多，是一个 可缩放矢量图形。
除此之外的东西还真就不是特别了解，所以下午专门花了大约2个小时研究了一下。
不查不知道，一查吓一跳，在网上居然没有关于 SVG 比较好的文章（其实是根本没有）。
所以本着我不入地狱谁入地狱的心态，来给大家作死研究下 SVG 是什么东西。
闲话少叙，正文开始。
1.SVG 小知识这里引用一下 W3C 对 SVG 的解释。
什么是SVG？
之后来简单说明一下，SVG 的推荐用法。
下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>代码解释：
第一行包含了 XML 声明。请注意 standalone 属性！
该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。
standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
第二和第三行引用了这个外部的 SVG DTD。
该 DTD 位于 “”。
该 DTD 位于 W3C，含有所有允许的 SVG 元素。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。
这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。
version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。
如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。
stroke 和 stroke-width 属性控制如何显示形状的轮廓。
我们把圆的轮廓设置为 2px 宽，黑边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！
2. SVG 小案例在开始正文之前，我首先给大家放上一段完成的代码，让你们能够自行先摸索一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ zoom:10; } svg{ background: #ccc; } p{ font-size: 5px; } </style> </head> <body> <svg> <path fill="red" d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"/> <path fill="blue" d="M34 14l-9.38 9v-9l4-12.28c.205-.632 1.176-.632 1.38 0z"/> <path fill="green" d="M18,34.38 3,14 33,14 Z"/> <path fill="yellow" d="M18,34.38 11.38,14 2,14 6,25Z"/> <path fill="cyan" d="M18,34.38 24.62,14 34,14 30,25Z"/> <path fill="purple" d="M2 14L.1 20.16c-.18.565 0 1.2.5 1.56l17.42 12.66z"/> <path fill="pink" d="M34 14l1.9 6.16c.18.565 0 1.2-.5 1.56L18 34.38z"/> </svg> <p>我是李鹏李先生</p> </body> </html>上述代码的完成效果如下：
可以看见，我用 SVG 绘制了一个小狐狸头的形状。
那这个东西是怎么弄的呢？
我们一条条的来分析。
3. 案例分析首先是规定一个绘制区域。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ zoom:10; } svg{ background: #ccc; } p{ font-size: 5px; } </style> </head> <body> <svg></svg> <p>我是李鹏李先生</p> </body> </html>我这里设置了一个区域，并且给了一个灰色的背景颜色。
之后，我在里面使用了<path>标签。
这里引用一下小甜瓜的话。
使用path标签时，就像用指令的方式来控制一只画笔。
比如：移动画笔到某一坐标位置，画一条线，画一条曲线，完事了抬起画笔。
那这里面我们看到用了好几个 <path> 标签，那我们先从第一个开始看。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ zoom:10; } svg{ background: #ccc; } p{ font-size: 5px; } </style> </head> <body> <svg> <path fill="red" d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"/> </svg> <p>我是李鹏李先生</p> </body> </html>绘制结束如下：
可以看见，我绘制了一个狐狸的右耳朵（正对屏幕）。
其他部分其实也都是大同小异，换换位置而已。
这里面可以看到，我使用了好几个属性，那么这些属性都是怎么回事呢？
接下来咱们先暂停一下，一起来看看，最基础的绘制原理到底是什么。
4. 基本原理介绍我们的 SVG 实际也是通过具体的路径去绘制一个图形。
绘制时，坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。
大写绝对定位，参照全局坐标系；
小写相对定位，参照父容器坐标系。
指令和数据间的空格可以省略（可以连在一起），
而且同一指令可以出现多次，也可以只用一次。
其中还有许多特定的英文单词，里面分别代表不同的含义。
在这里给大家做一个整理。
缩写字母 函数参数 函数含义
M moveto(M X,Y) 将画笔移动到指定的坐标位置
L lineto(L X,Y) 画直线到指定的坐标位置
H horizontal lineto(H X) 画水平线到指定的X坐标位置
V vertical lineto(V Y) 画垂直线到指定的Y坐标位置
C curveto(C X1,Y1,X2,Y2,ENDX,ENDY) 三次贝赛曲线
S smooth curveto(S X2,Y2,ENDX,ENDY)
Q quadratic Belzier curve(Q X,Y,ENDX,ENDY) 二次贝赛曲线
T smooth quadratic Belzier curveto(T ENDX,ENDY) 映射
A elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) 弧线
Z closepath() 关闭路径
示范样例：
期望操作 M 起点X，起点Y L（直线）终点X，终点Y H（水平线）终点X V（垂直线）终点Y 代码实现 M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90
相关文章
精彩导读
热门资讯
关注我们
