SVG实现描边动画

SVG动画效果

先来放一个自己写的效果：

OK，现在我们来聊一聊SVG描边动画的实现

---

一、基础知识

1、stroke相关属性

• stroke：表示描边的颜色。
• stroke-width ：表示描边的粗细。
• stroke-linecap ：表示描边端点表现方式。可用值有：butt, round, square, inherit.
  
• stroke-linejoin 表示描边转角的表现方式。可用值有：miter, round, bevel, inherit.
  
• stroke-miterlimit ：表示描边相交（锐角）的表现方式。默认大小是4.
• stroke-dasharray ：表示虚线描边。可选值为：none, <dasharray>, inherit. none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
• stroke-dashoffset ：表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
• stroke-opacity 表示描边透明度。默认是1。

2、css动画

语法
animation: name duration timing-function delay iteration-count direction;

• animation-name：规定需要绑定到选择器的 keyframe 名称。
• animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function：规定动画的速度曲线。
• animation-delay：规定在动画开始之前的延迟。
• animation-iteration-count：规定动画应该播放的次数。
• animation-direction：规定是否应该轮流反向播放动画。

二、实战

HTML代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="454px"
	 height="340px" viewBox="0 0 454 340" enable-background="new 0 0 454 340" xml:space="preserve">
	 		// 设置文字渐变颜色
	 		<linearGradient id="linearGradient_1" x1="0%" y1="0%" x2="100%" y2="0%">
		        <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
		        <stop offset="50%" style="stop-color:rgb(255,0,255); stop-opacity:1"/>
		        <stop offset="100%" style="stop-color:rgb(0,255,0); stop-opacity:1"/>
		    </linearGradient>

			<g id="SVG">
				<g fill="none" stroke="url(#linearGradient_1)" stroke-width="2">
					<path d="..."  />
					<path d="..."/>
					<path d="..."/>
				</g>
			</g>
		</svg>

css代码主要是实现动画，让它动起来，具体如下：

path {
			/*stroke:#000;*/
		  	stroke-dasharray: 25;
		  	stroke-dashoffset: 300;
		 	animation: dash 5s linear  infinite;
}

@keyframes dash {
		  	0%   {stroke-dashoffset: 300;  }
    		100% {stroke-dashoffset: 0;}
}

源代码：https://github.com/Echo-chu/SVG