svg+css3制作hover线框效果

线框按钮.gif

查看demo

结构

    
        

            
hover
        
    

Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。矩形的宽高分别为200px，60px。
注意开头的部分xml声明，与svg的命名空间xmlns、等部分，主要是考虑兼容性的问题；这些部分在HTML5中基本都可以不用写了(写不写还是自己瞧着办吧)。

样式

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, , inherit. 其中，none表示不是虚线；为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为：, , inherit. 百分比值，长度值，继承。

我们现在都试想一下，如果stroke-dasharray和stroke-dashoffset值都很大，超过了描边路径的总长度，会怎么样？
用中文解释就是，一根火腿肠12厘米，要在上面画虚线，虚线间隔有15厘米，如果没有dashoffset，则火腿肠前面15厘米会被辣椒酱覆盖！实际上只有12厘米，因此，我们看到的是整个火腿肠都有辣椒酱。现在，dashoffset也是15厘米，也就是虚线要往后偏移15厘米，结果，辣椒酱要抹在火腿肠之外，也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG，也就是直线看不见了。我们把dashoffset值逐渐变小，则会发现，火腿肠上的辣椒酱一点一点出现了，好像辣椒酱从火腿肠根部涂抹上去一样。

两个属性都设置成最大，然后stroke-dashoffset慢慢减小，您会看到直线慢慢出来了，这就是SVG路径绘制动画的原理。

参考来源