svg 描边动画（stroke-dasharray stroke-dashoffset）

参考博客：

https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

更多文章见收藏 “ 描边动画 ”

1、效果一：

		<svg>
          <rect class="square" x="20" y="20" width="100" height="100" fill="none">
          </rect>
        </svg>

	.square{
      stroke-width:1px;
      stroke:red;
      stroke-dasharray:400px;
      animation: animate1 3s linear infinite;
    }
    @keyframes animate1 {
      0%{stroke-dashoffset: 400px;}
      100%{stroke-dashoffset: 0;}
    }

2、效果二：

		<svg height="40" width="150">
          <rect id="shape" height="40" width="150" />
        </svg>

	#shape {
      stroke-width: 3px;
      fill: transparent;
      stroke: #009FFD;
      stroke-dasharray: 400;
    }
    svg:hover #shape { //矩形切段
      stroke-dasharray: 100 30 ; //每段虚线长100px 段与段之间的距离为30。如果不写30，则默认间隔也为100px
      stroke-width: 3px;
      stroke: #06D6A0;
      animation: animate2 3s linear infinite; //infinite 无限次循环
    }
    @keyframes animate2 { //动起来
      0%{stroke-dashoffset: 400;}
      100%{stroke-dashoffset: 0;}
    }

3、效果三：

		<svg height="40" width="150">
          <rect id="shape" height="40" width="150" />
        </svg>

	#shape {
      stroke-width: 3px;
      fill: transparent;
      stroke: #009FFD;
      stroke-dasharray: 100 30;
      animation: animate2 3s linear infinite; //infinite 无限次循环
    }
    @keyframes animate2 { //动起来
      0%{stroke-dashoffset: 400;}
      100%{stroke-dashoffset: 0;}
    }