svg简单的应用

1、可以直接在html内写svg

（1）width宽度，height高度

（2）xmlns svg的规则

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

2、rect节点

（1）长方形

（2）x、y位置

（3）rx、ry圆大小

（4）fill填充颜色

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<rect x="10" y="14" width="300" rx="7" ry="7" height="14" fill="#972716" />
</svg>

3、circle节点

（1）圆形

（2）cx、cy位置

（3）r圆直径

（4）fill填充颜色

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<circle cx="149" cy="11" r="11" fill="#972716" />
</svg>

4、path画线节点

（1）画线

（2）d画线的内容

　　1、M原点

　　2、Q弧线

　　3、L直线

　　4、Z闭合

（3）fill填充

（4）stroke描边

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="300" 
    height="22">
<path 
    d="
    M 0 11 
    Q 0 4 7 4
    L 136.5 4
    Q 136.5 0 143 0
    Q 149.5 0 149.5 4
    L 200 4
    L 200 11
    Q 200 4 193 4 
    L 200 4
    L 200 18
    L 193 18
    Q 200 18 200 11
    L 200 18
    L 0 18
    Z
    " 
    stroke="black"
    fill="transparent"
  >
</svg>

5、viewBox属性

（1）min-x, min-y, width and height。（其中width和height是按比例的并不是数值，自适应页面的话还是要使用viewBox属性）

<svg width="100%" height="100%" viewBox="0 0 100 100">
    <rect x="0" y="0" width="50" height="50"  fill="#972716"/>
</svg>