svg 基本图形
一、矩形<rect>
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
rx 和 ry 属性可使矩形产生圆角。
二、圆形<circle>
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
</html>
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
- r属性定义圆的半径
三、椭圆 <ellipse>
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="110" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
</body>
</html>
四、直线 <line>
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</body>
</html>
- x1 属性在 x 轴定义线条的开始
- y1 属性在 y 轴定义线条的开始
- x2 属性在 x 轴定义线条的结束
- y2 属性在 y 轴定义线条的结束
五、多边形 <polygon>
<!DOCTYPE html>
<html>
<body>
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
</body>
</html>
- points 属性定义多边形每个角的 x 和 y 坐标
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
fill-rule 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）。对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。但是，对一个复杂的路径，比如自相交或者一个子路径包围另一个子路径，“内部”的理解就不那么明确了。
fill-rule 属性提供两种选项用于指定如何判断图形的“内部”:
nonzero
字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图演示了nonzero规则:
evenodd
字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。下图演示了evenodd 规则:
提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办，因为任意方向的射线都可以，那么只需要简单的选择另一条没有这种特殊情况的射线即可。
六、多段线<polyline>
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
</body>
</html>
七、路径 <path>
每一个命令都用一个关键字母来表示，每一个命令都有两种表示方式。
一种是用大写字母，表示采用绝对定位。
另一种是用小写字母，表示采用相对定位
（例如：从上一个点开始，向上移动10px，向左移动7px）
下面的命令可用于路径数据：
直线命令
M = moveto
path中的起点，必须存在。
M x y //绝对位置 m dx dy //相对位置。L = lineto
【Line to】需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段H = horizontal lineto
H 【绘制平行线】 只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动V = vertical lineto
V 【绘制垂直线】 只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动Z = closepath
Z 【闭合路径】 Z命令会从当前点画一条直线到路径的起点。不区分大小写曲线命令
C = curveto
三次贝塞尔曲线。(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。
控制点描述的是曲线起始点的斜率，曲线上各个点的斜率，是从起点斜率到终点斜率的渐变过程C x1 y1, x2 y2, x y
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>
</body>
</html>
S = smooth curveto
当一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变），可以使用S命令。简写的贝塞尔曲线命令。
如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。S x2 y2, x y
【注意】蓝色部分是对称的控制点（不用写蓝色的点，系统生成）
S 只需要后面两个红点的位置
Q = quadratic Bézier curve
二次贝塞尔曲线Q，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
Q x1 y1, x y实例：
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg""> <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> </svg>
T = smooth quadratic Bézier curveto
与S命令相似，是Q命令的简写命令。
与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。【需要注意】，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
T x y例子：
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> </svg>效果图如下：【注意蓝色部分是自动补全对称的】
A = elliptical Arc
绘制一个椭圆圆弧
A rx ry x L s X Y，表示绘制一个椭圆圆弧经过(X,Y)点。
rx：椭圆横轴半径
ry：椭圆竖轴半径
x：椭圆横轴相对于CanvasX轴的偏移角度。这将设置相对于正常x轴旋转一定角度的弧的x轴。大部分情况下，这个参数被设置为0。
L：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，此值取0表示绘制小弧度，取值1表示绘制大弧度
s：在前三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，去掉上面 L 标识后还有两个，s取值0表示绘制逆时针方向的圆弧，取值1表示绘制顺时针方向的圆弧。<!-- 圆弧 --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M50,50 A 30,50 30 0,1 100,100" style="stroke:#0400ff; fill:none;" /> <path d="M50,50 A 30,50 0 0,1 100,100" style="stroke:#660000; fill:none;" /> <path d="M50,50 A 30,50 0 1,1 100,100" style="stroke:#00ff40; fill:none;" /> </svg>
**注意：**以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
八、文本 <text>
<text>元素内部可以放任何的文字，
字体的属性如同CSS，例如：font-family、font-style、font-weight、font-size等等。
与CSS不同的地方在于，这些属性直接写在<text>标签内。
<!-- 文本 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red" font-size="20px">I love SVG</text>
</svg>
可以按如上方法为<text>标签的x、y属性设置多个值，那么每一个值都是对字符串中的对应字符设置位置。
<svg width="200" height="150" style="background:#f00" xmlns="http://www.w3.org/2000/svg">
<text x="20 40 60 80 " y="20 40 60 80">学习加油</text>
</svg>
在属性y的值的个数与字符串长度不符时，其余未被显式设置位置的字符都会继承最后一个被设置位置的字符的y属性。
若是属性x的值的个数与字符串长度不符时，未被设置位置的字符则是正常的跟在最后一个被设置位置的字符后。
<svg width="200" height="150" style="background:#f00" xmlns="http://www.w3.org/2000/svg">
<text x="20 40 60 80 " y="20 40 60 ">学习加油</text>
</svg>
文字偏移
dx=“dx” dy=“dy”
与x、y属性一样，dx、dy一样可以设置多个值
<svg width="200" height="150" style="background:#f00" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="30" r="2" fill="#fff" />
<text dx="100" dy="30">Hello World</text>
</svg>
文本旋转
rotate=“deg”
<!-- 旋转文字 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: #00f">
<circle cx="50" cy="20" r="2" fill="#fff" />
<text x="50" y="20" fill="red" rotate="45" font-size="18px">学习加油</text>
</svg>
rotate=“deg1 deg2 deg3…degn”
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: #00f">
<text x="50 100 150 200" y="20" fill="red" rotate="45 90 120 180" font-size="18px">学习加油</text>
</svg>
整体旋转 transform=“rotate(30 40,100)”
<!-- 旋转整体文字 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: #00f">
<line x1="0" y1="20" x2="200" y2="20" style="stroke:rgb(43, 255, 0);stroke-width:2" />
<line x1="0" y1="40" x2="200" y2="40" style="stroke:rgb(43, 255, 0);stroke-width:2" />
<line x1="50" y1="240" x2="50" y2="0" style="stroke:rgb(81, 255, 0);stroke-width:2" />
<line x1="100" y1="240" x2="100" y2="0" style="stroke:rgb(51, 255, 0);stroke-width:2" />
<circle cx="0" cy="0" r="50" stroke="black" stroke-width="2" fill="rgba(255, 255, 242,0.4)" />
<text x="50" y="20" fill="red" transform="rotate(30)" font-size="18px">|旋转30°</text>
<text x="50" y="20" fill="red" transform="rotate(30 40,100)" font-size="18px">|旋转30°上平移40,右平移100</text>
<text x="50" y="20" fill="#fff" font-size="18px">|无旋转</text>
</svg>
以 左上角（0，0）为原点旋转，
文本的长度
textLength=“widthValue”
<!-- 文本长度 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: #00f ; width: 200px;" >
<text dx="0" dy='20' textLength="200" fill="#fff">学习加油</text>
</svg>
通过设置textLength把字符串长度强行拉伸到了200px宽。
<!-- 文本长度 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: #00f ; width: 200px;" >
<text dx="0" dy='20' textLength="200" fill="#fff">学习加油1学习加油2学习加油3学习加油45678</text>
</svg>
子元素—tspan元素
用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background: #00f ; width: 200px;">
<text dx="0" dy='20' fill="#fff">学习加油1<tspan x="10" y="45" fill="#f00">学习加油2</tspan>
<tspan fill="#fff">tspan</tspan>
</text>
</svg>
路径上的文字
<textPath>
<!-- 路径上的文字 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M50,50 A 30,80 0 0,1 100,140" style="stroke:#660000; fill:none;" />
<defs>
<path id="path1" d="M50,50 A 30,80 0 0,1 100,140" style="stroke:#660000; fill:none;" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>
