svg (Scalable Vector Graphics) 可缩放适量图形

前言：

幸运之神的降临，往往只是因为你多看了一眼，多想了一下，多走了一步

--------------------------------正文---------------------------------

line（线）

  svg{
     width:800px;
     height:600px;
     background:#fff;
  }
  line{
     stroke:#000;
     stroke-width:10;
  }       
  

rect（矩形）

  rect{
    x:100;
    y:100;
    width:200px;
    height:150px;
    fill:#f00;
    stroke:#000;
    stroke-width:10;
    fill-opacity:0.5;
    rx:20;
    ry:20;
  }
  

circle（圆形）

  circle{
    cx:300;
    cy:200;
    r:100;
    fill:#f00;
    stroke:#000;
    stroke-width:10;
    fill-opacity:0.5;
  }
  

ellipse(椭圆)

  ellipse{
    cx:300;
    cy:200;
    rx:200;
    ry:100;
    fill:none;
    stroke:#000;
  }
  

polygon(多边形)

polyline（折线）

path(路径)

  
  
  
        M       moveto
        L       lineto
        H       水平to
        V       垂直to
        C       三次贝塞尔曲线
        S       继续画三次贝塞尔曲线
        Q       二次贝塞尔曲线
        T       继续画二次贝塞尔曲线
        A       弧
        Z       闭合

库

  国产
    echarts         百度
  进口
    Raphaël
    threejs
    highcharts
    charts
    d3
    openlayers

中国地图