SVG基础

1. svg标签: 设置画图时画布的大小,其中可以通过width和height设置长宽。

<svg width=500 height=500></svg>

可以在svg标签中添加rect标签、text标签、line标签等

2. rect标签：可以用来绘制矩形

<rect x=20 y=20 width=100 height=200 stroke="red" stroke_width=2 fill="blue"/>

（1）x，y表示矩形左上角的顶点所在的位置（在整个界面的左上角为0，0）,一般有自带的格式,设置x,y都为0但是真正显示的位置并不一定在整个显示页面的最左上角。可以通过下面的代码消除自带的格式

<style>
    html,body{
        padding:0; 
        margin: 0;
    }
 </style>

rx，ry属性可以使矩形产生圆角
（2）rect标签的属性width和height设置矩形的长宽,
（3）fill属性可以设置矩形的填充颜色,
（4）stroke属性设置矩形边框的颜色,
（5）stroke_width属性设置矩形边框的宽度,
（6）fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
（7）stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
（8）如果要定义整个图形的透明度可以直接用opacity标签（合法的范围是：0 - 1），

3. circle标签：绘制圆形

  <svg>
        <circle cx="50" cy="50" r="50" stroke="blue" stroke_width=2 fill="red"/>
    </svg>

（1）cx，cy表示圆心的位置，r表示半径
（2）stroke属性设置边框的颜色，stroke_width设置边框的宽度

4. text标签： 可以定义文本，设置在svg标签内部

 <svg id="hist01" width=500 height=500>
        <text x=0 y=20 fill="red">直方图</text>
    </svg>

text标签里的x，y可以设置文本的位置，fill属性可以设置文本的颜色

5. line标签：用来创建线条

<line x1=0 y1=0 x2=800 y2=500 stroke="red"></line>

x1,y1表示线条起始点的位置，x2，y2表示线条结束点的位置
stroke属性用来设置颜色，stroke_width属性设置边框的宽度。

6. path标签：用来定义路径
   M = moveto
   L = lineto
   H = horizontal lineto
   V = vertical lineto
   C = curveto
   S = smooth curveto
   Q = quadratic Bézier curve
   T = smooth quadratic Bézier curveto
   A = elliptical Arc
   Z = closepath
   所有命令均允许小写字母，大写表示绝对定位，小写表示相对定位。