html5内联SVG——<path>标签

什么是SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

—— 以上摘自W3C

<path>标签

<path>是一个模拟画图动作的svg标签，拥有很强的表达能力，主要借助其基于计算的矢量性质。

d属性：
是一个字符串，字符串编码了path的画法，可以看成若干命令组成，命令可以带参数（一般是带坐标参数）。解析字符串是在看到命令时结束上一个命令并分段。形式类似：
"M 100 100 L 300 100 L 200 300 z"
出现了三个命令：M,L,z。其中M，L命令是带坐标参数的。z不带。
M :- moveto 将绘画点重置到指定点上
L :- lineto 从当前的点画一条直线到目标点上，同时当前点更新
z :- last,closepath 从当前点连回最早的点，以line的形式

fill属性：
图形如果闭合的话在图形里面显示特定颜色。

stroke属性:边的颜色
stroke-width属性：边宽

示例：
  <path d="M 100 100 L 300 100 L 200 300 z"
        fill="red" stroke="blue" stroke-width="3" />

通常一个命令的大写版本表示绝对定位，小写版本表示相对定位。即使其实并不存在区别，命令也会有大小写版本，如Zz.

M m:moveto
Z z:closepath
L l:lintto
H h:horizontal lineto :这个只有一个可以看成y值不变的L l
V v:verical lineto:类似H h，x值不变
C c:curveto 给定三个坐标，以前两个为控制点，作从当前点到第三个点的贝塞尔曲线，并且更新当前点
S s:shorthand/smooth curveto 上面的简化版本，省略第一个坐标的给出，第一个坐标被自动设定为当前点与上一个贝塞尔曲线命令第二个坐标的的相对点。所以你可以连续用S绘制。
Q q:quadratic Bezier curveto 就是只有一个控制点的贝塞尔曲线
T t:Shorthand/smooth quadratic Bezier curveto省略一个控制点的一个控制点的贝塞尔曲线，那个点被取成上一个一个控制点的贝塞尔曲线与当面点的相对点。
A a:ellipical arc 这个东西比较蛋疼，一共六个参数，原x半径，原y半径，椭圆自x轴旋转角度（这个旋转貌似是顺时针转的，可能是因为y轴是反着取的），大弧flag，sweep_flag,目标点x,y。其中前三个参数是为了确定一个椭圆，现在可以把一个椭圆嵌到当前点和目标点中，我们画的就是两点之间的弧。然而事实上可以嵌入对称的两个椭圆，而且弧也有取大取小两种取法，这就使用两个flag（0,1编码）确定到底取四个弧中的哪一个。大小弧flag容易理解（1取大的），sweep flag大致说是若取1则取“正角度”那边的（那边不是同一个椭圆，而是一个椭圆的大边以及另一个椭圆的小边作为一边，这个看图就清楚），稍微考虑一下就知道的确一边旋转方向是一致的，另一边相反，不管y轴有没有看成倒置。不过奇葩的是貌似正反是按照看到的方向来算的而不是倒置的方向。总之屏幕或者矩阵这种y倒置的副作用真的挺蛋疼