简单介绍：

svg是一个矢量图形，有用户坐标轴(可以用vivebox来修改)和视口坐标轴 svg 以前要定义版本，现在可以不用写然后宽高和前面的默认一样，最后一个命名空间xmlns=‘一个网址’，没有2这个版本，给废除了。

内容：

用户坐标系如果不写就是和视口坐标系一样，同等宽高，都是默认为宽300px，高150px。

如果，他们的宽高比是一样的，那么他们就会等比例缩放（只会呈现vivebox规定范围以外的），比例若是不一样，会按照viewbox的比例进行缩放，但是会进行居中，实在不行可以使用preseveAspectRatio指定是否在整个用户坐标系统是否在视口内可见。

preseveAspectRatio：none强制拉伸图片，以填充整个视口。

xMinYMin，在视口最小x和y轴上显示

标签属性：

rect：矩形

rx,ry是指圆角x，y轴方位的半径。

circle:圆 cx和cy是圆心的坐标。

ellipes：椭圆 c开头是设置椭圆中心的 r是椭圆x,y轴的半径。

line：线条属性 x1= x2= y1= y2=

polyline：折线 points= “ 0 0 ， 1 1 ”一般这种，或者用，分割

polygon：points=“” 最后会自动闭合

path：d=“” 就是指令+参数字母大写采用绝对定位，小写相对定位

绘制图片：

要使用href来引用资源，宽高不设计就默认宽高。

绘制文字：

他也可以用css设计相应属性里面有这个属性只能设置在text或者tspan里有text-anchor文本流方向和dominant-baseline基线对齐

用来组合元素的容器，可以把子属性的共有属性提到这个盒子上，g上的可以被继承，变换也会应用到所有的子元素。后面可以用use复用。

中定义的图形不会默认呈现，可以用use调用，坐标系参考用户坐标系调用：

use：href引用id x/y元素的坐标，在vivebox的基础上再移动。width和height，在引入svg或symbol元素才起作用。

symbol和上面defs一样，可以用来做精灵图

css可以卸载defs里，或者内联的style里，以及head的style的优先级是：内联>defs>外部/head内部>属性fill

渐变

定义一个linearGradient节点，并指定一个id，最后在想要调用这个效果的时候，fill或者stoke这个id

        //xy是定义从哪到哪渐变。 后面那个是定义动画
      <linearGradient id="Gradiend1"  x1="0" y1="0" x2="0" y2="1"  
      gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="red"></stop>
        <stop offset="50%" stop-color="green"></stop>
        <stop offset="100%" stop-color="blue"></stop>
      </linearGradient>
     
      <rect x="20" y="10" width="100" height="50" fill="url(#Gradiend2)"></rect>

毛玻璃

     <filter id="Filter"> //容器
      <feOffset dx="0" dy="0" />//偏移度
      <feGaussianBlur stdDeviation="8"></feGaussianBlur>//对图片的模糊度
    </filter>
  </defs>

  <image
    x="0"
    y="0"
    width="200"
    height="200"
    href="../images/avatar.jpeg"
    filter="url(#Filter)"
  ></image>

transform属性，和之前一样会改变坐标轴，rotate那个xy是指针对哪个点旋转

描边动画

其实就是两个属性

stroke-dasharray =‘number，number’ 就是填色区域，非填色区域这样匹配
stroke-dashoffset =‘’ 就是在上面个模式下的偏移量，等于总长就是看不见了 动画就是设置这两个属性，让他们变换。

最后

推荐两个svg的封装库SMIL(完全开源)这个可以做按路径偏移，Snap.svg(部分收费)