svg简介
svg 意为可缩放矢量图形（Scalable Vector Graphics），最大的特点就是伸缩不会失真。
svg是用xml进行描述的，在前端方面现在应用越来越广泛，各大浏览器支持越来越好了。
这边尝试记录一下用svg画各种形状。
svg标签
要使用svg，需要先引入svg标签：
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 2</svg>
其中：
1width表示图片的宽。 2height表示图片的高。
画长（正）方形
画方形使用rect标签，其中有如下属性：
1x、y表示左上顶点坐标，相对于svg左上角的位置。 2width和height表示宽高。 3fill设置填充色。 4stroke表示轮廓颜色。 5stroke-width表示轮廓宽度。
代码示例：
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 2 <rect 3 x="0" 4 y="0" 5 width="200" 6 height="200" 7 fill="steelblue" 8 stroke="pink" 9 stroke-width="10" 10 ></rect> 11</svg>
运行效果：
画圆形
画圆形使用circle标签，其中相关属性：
1cx、cy表示圆形坐标，相对于svg左上角。 2r表示半径。
代码示例：
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 2 <circle 3 cx="100" 4 cy="100" 5 r="90" 6 fill="steelblue" 7 stroke="pink" 8 stroke-width="10" 9 ></circle> 10</svg>
运行效果：
画椭圆
画圆形使用ellipse标签，其中相关属性：
1cx、cy表示圆心坐标，相对于svg左上角。 2rx 表示短半径。 3ry 表示长半径。
代码示例：
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 2 <ellipse 3 cx="100" 4 cy="100" 5 rx="90" 6 ry="50" 7 fill="steelblue" 8 ></ellipse> 9</svg>
运行效果：
画直线
画圆形使用line标签，其中相关属性：
1x1、y1表示点1坐标，相对于svg左上角。 2x2、y2表示点2坐标，相对于svg左上角。 3r表示半径。
主要是要确认两个点，两点确定一条直线。
代码示例：
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 2 <line 3 x1="0" 4 y1="0" 5 x2="200" 6 y2="200" 7 stroke="steelblue" 8 stroke-width="2" 9 /> 10</svg>
运行效果：
画多边形
画圆形使用polygon标签，其中相关属性：
points表示多个点的坐标，每个点用空格分离。
代码示例，画一个三角形：
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 2 <polygon 3 points="0,0 0,150 150,150" 4 fill="steelblue" 5 /> 6</svg>
运行效果：
画多线段
画圆形使用polyline标签，其中相关属性：
points表示多个点的坐标，每个点用空格分离。
代码示例：
1<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 2 <polyline 3 points="0,0 0,100 60,150 80,100" 4 fill="none" 5 stroke="steelblue" 6 stroke-width="3" 7 /> 8</svg>
运行效果：
因为是画线段，所以fill设置为none表示不要填充色，通过 stroke 设置线段颜色。
相关参考资料：