<u>查看demo</u>
<html>结构
<body>
<div class="svg-wrapper">
<svg height="60" width="200" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="200"/
</svg>
<div class="text">hover</div>
</div>
</body>
Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。矩形的宽高分别为200px，60px。
注意开头的部分xml声明，与svg的命名空间xmlns、等部分，主要是考虑兼容性的问题；这些部分在HTML5中基本都可以不用写了(写不写还是自己瞧着办吧)。
<css>样式
html,body {
background: #aaa;
height: 100%;
text-align: center;
overflow: hidden;
}
.svg-wrapper {
cursor: pointer;
width: 200px;
height: 60px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.shape {
fill: transparent; ／*--矩形的内部填充设置为透明，只留下边框--*／
stroke-dasharray: 60px 460px;
stroke-dashoffset: -330px;
stroke-width: 2px;
stroke: #fff;
}
.text {
line-height: 32px;
color: #fff;
font-size: 22px;
position: relative;
top:-45px;
}
／*--设置动画属性--*／
@keyframes draw {
0%{stroke-dasharray: 60px 460px;
stroke-dashoffset: -330px;
stroke-width: 2px;}
100%{stroke-dasharray: 520px;
stroke-dashoffset: 0;
stroke-width: 2px;}
}
.svg-wrapper:hover .shape {
-webkit-animation: draw .5s ease forwards;
animation: draw .5s ease forwards;
}
stroke-dasharray 表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
我们现在都试想一下，如果stroke-dasharray和stroke-dashoffset值都很大，超过了描边路径的总长度，会怎么样？
用中文解释就是，一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG，也就是直线看不见了。我们把dashoffset值逐渐变小，则会发现，火腿肠上的辣椒酱一点一点出现了，好像辣椒酱从火腿肠根部涂抹上去一样。
两个属性都设置成最大，然后stroke-dashoffset慢慢减小，您会看到直线慢慢出来了，这就是SVG路径绘制动画的原理。
