初学者学习svg

svg是什么？

• 位图:也称像素图，放大失真。适应场景：照片，商品图片，色彩细节比较丰富的图 例如：canvas生成图

• 矢量图：通过计算机函数生成的图形，放大不失真 例如：flash动画，flash小游戏，svg,Ilusstrator软件生成的，适应场景：颜色不是特别丰富，适合图形不是特别复杂的场景，通常用于logo,icon

• 强烈推荐适配插件！！！

• 

  我们可以新建一个文件命名后缀为.svg 这时候会出现两个页面 

  长这样 

• 

• 我们在页面中连打两个svg

• <svg width="" height="" xmlns="http://www.w3.org/2000/svg">
     
      
  </svg>

  就可以在里面使用啦

• 绘制一条线 line常用属性：
    x1,y1:指定线起始坐标（左，上）
    x2,y2:指定线结束坐标（左，上）
    stroke：线颜色  相当于canvas中的strokeStyle
    stroke-width:设置线粗细  相当于canvas中的lineWidth

• <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>
  

  当然我们还可以绘制矩形

•  rect常用属性说明：
  x,y左上角坐标
  width,height：矩形的宽和高 

• 这样可以写出来一个宽高都是百分百的盒子

•  <rect x="0" y="0" width="100%" height="100%" style='fill:red' />

  绘制圆 

• circle常用属性：
   cx：圆心的x值
   cy：圆心的y值
   r：圆半径

•  <circle cx="300" cy="150" r="100" style="fill:green" />

  绘制椭圆

• ellipse常用属性：
   cx：椭圆心的x值
   cy：椭圆心的y值
   rx:椭圆心x轴半径
   ry:椭圆心y轴半径

  注意：圆是特殊的椭圆，只需将rx,ry改成相同数值即可

• <ellipse cx="300" cy="150" rx="100" ry="50" style="fill:yellow"/>

  绘制多边形有两种方法

• 总结：
    polyline不会自动封装结束和起始点，而polygon自动封封闭起始和结束点的连线
   

•    
  格式：
  <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自动封封闭起始和结束点的连线
  
  例如：
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
      <polyline points="100 200,180 50,260 230,150 360,100 200" style="stroke:red;fill:transparent" />
  </svg>
  
  
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
      <polygon points="100 200,180 50,260 230,150 360,100 200" style="stroke:red;fill:transparent" />
  </svg>

  绘制文字

• <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
      <text x="300"  y="150" style="fill:red;font-size:30px;" text-anchor="middle">今天天气很好</text>
  </svg>