实例代码：
<svg width="500" height="500"> <path d="M50,50 A60 30 0 1,0 150,50 Z" stroke="#fb3" stroke-width="4px" fill="transparent"></path> </svg>分析：起点坐标(50,50)，终点坐标(150,50)，角度为0，角度弧线大小large-arc-flag为1，选择大弧度，根据分析，即选择红色的弧线，又绘制方向sweep-flag为0，为逆时针，即从起点沿着逆时针方向绘制到终点，所以是红色虎先位于下方。
注意：当 (起点与终点之间的直线距离／2) > (椭圆的水平半径) 时，角度为0的情况下，此时椭圆会等比放大，到相等为止。
6.5闭合类参数
Z：closepath，绘制直线将终点与起点连接
再次提醒：大写字母：表示坐标系中使用绝对坐标，小写字母：使用相对坐标（相对当前画笔所在的点）
三、文字元素
1、基础
在svg中使用<text></text>标签绘制文字。
参数说明：
x：文字的x坐标；
y：文字的y坐标；
dx：相对于当前位置x方向的距离；
dy：相对于当前位置的y方向的距离；
textLength：文字的显示长度；
rotate：旋转角度，也可以使用transform="rotate(30)"
示例图：
实例代码：
<svg width="200" height="200"> <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text> </svg>
2、文本路径
如果要实现文字沿着路径进行排列，可使用<textPath></textPath>标签来实现。需要提前定义好路径path，并指定id，textPath使用xlink:href定义文字要匹配的路径。
示例图：
实例代码：
<svg width="600" height="600"> <path id="textPath1" d="M100,100 C140,50 140,240 200,200 S240,280 360,360" stroke="#fb3" stroke-width="4px" fill="transparent"></path> <text x="10" y="10" dx="-10" dy="-10" rotate="20"> <textPath xlink:href="#textPath1" textLength="300"> 很扭曲的测试示例文字 </textPath> </text> </svg>
四、特殊元素
1、克隆元素use
use标签用来克隆其他元素，克隆后的元素不能修改样式。 示例图：
示例代码：
<svg> <rect id="rect1" x="10" y="10" width="100" height="100" stroke="#5588aa" stroke-width="5" fill="transparent" ></rect> <use x="20" y="20" xlink:href="#rect1"></use> </svg>参数说明：
x：相对被克隆元素x轴偏移量；
y：相对被克隆元素y轴偏移量；
xlink:href：指向被克隆元素的ID
2、模板元素symbol
symbol标签用定义模版，需要结合use标签使用，模版在未被使用之前，不会展示在页面上。模版内部可包含多个元素
示例代码：
<svg> <symbol id="template1"> <rect x="10" y="10" width="100" height="100" stroke="#5588aa" stroke-width="5" fill="transparent" ></rect> </symbol> <use x="20" y="20" xlink:href="#template1"></use> </svg>
3、组元素g