【SVG】

使用svg

* 创建一个后缀为.svg的文件
* 基本格式 
* <svg xmlns="http://www.w3.org/2000/svg"></svg>  xmlns：svg命名空间

1.绘制一个直线

 <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
    <line x1="30" y1="80"  
          x2="200" y2="80"
          stroke="#f00"
          stroke-width="5"/>
   </svg>
    //line常用属性： x1,y1:指定线起始坐标
   	//x2,y2:指定线结束坐标
   	//stroke：线颜色  相当于canvas中的strokeStyle
   //stroke-width:设置线粗细 相当于canvas中的lineWidth

2. 绘制一个矩形

  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
     <rect x="0" y="0" width="100%" height="100%" style='fill:red' />
  </svg>
  			rect常用属性说明：x,y左上角坐标 width,height：矩形的宽和高

3.绘制一个圆

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
    <circle cx="300" cy="150" r="100" style="fill:green" />
</svg>
circle常用属性：
 cx：圆心的x值
 cy：圆心的y值
 r：圆半径

4. 绘制一个椭圆

	<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
		<ellipse cx="300" cy="150" rx="100" ry="50" style="fill:yellow"/>
   </svg>	

ellipse常用属性： cx：椭圆心的x值 cy：椭圆心的y值
rx:椭圆心x轴半径 ry:椭圆心y轴半径
注意：圆是特殊的椭圆，只需将rx,ry改成相同数值即可

5. 绘制多边形

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
   <polyline points="设置多个点的坐标集合" style=""/>
</svg>

格式2：
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
   <polygon points="设置多个点的坐标集合" style=""/>
</svg>
// polyline不会自动封装结束和起始点，而polygon自动封封闭起始和结束点的连线

6. 绘制文字

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
 <ellipse cx="300" cy="150" rx="100" ry="50" style="fill:yellow" />
 <text x="300"  y="150" style="fill:red;font-size:30px;" text-anchor="middle">
	我爱你
</text>
</svg>

7. 绘制路径

• 使用path来绘制，可以绘制你想要的任何图形
• 常用命令参数
• 直线命令
  • m,M 相当于canvas中的moveTo
  • l,L 相当于canvas中的lineTo
  • v,V: 只绘制垂直线
  • h,H:只绘制水平线

• 曲线命令
  • 三次贝赛尔曲线
  • c,C
  • s:是c的简写，可以快速绘制曲线，通常和c配合使用
  • 二次贝赛尔曲线 ----q t
  • 绘制弧线：a
  • z:自动从当前坐标点绘制一条连接到起始坐标的直线（自动封闭）

所有的命令字母大小写区别

大写字母代表绝对坐标，也就是说以svg画布的左上角当坐标原点（0,0）

小写字母代表相对坐标，总是以上一个点的坐标当坐标下一个点的坐标原点(0,0)

• path绘制基本图形
  绘制直线和矩形