巧用svg 属性实现动画button

今天我们使用 svg rect 中的 stroke-dasharray 和stroke-dashOffset 来完成一个炫酷 的 按钮。

基本的html

     <svg width="400" height="400" viewBox="0 0 400 400">
        <rect x="20" width="80" y="20" height="30"></rect>
        <text x="60" y="40" text-anchor = 'middle'>HELLO</text> 
    </svg>

css

svg {
        width: 400px;
        height: 400px;
    }
    rect{
        fill: none;
        pointer-events: all;   // 在 ‘fill = none 的时候使用此属性才能使hover 效果生效’
        cursor: pointer;
        stroke: blue;
        stroke-width: 1px;
        stroke-dasharray: 20 60 20 10;
        stroke-dashoffset: 10;
        transition: all ease 0.4s;
    }
    rect:hover{
        stroke-dashoffset: 0;
        stroke-dasharray: 300;
    }

来看一下效果

显而易见，我们可以看出，在动画的实现过程中，stroke-dasharray 和stroke-dashOffset在起作用。

用法超级简单,

• stroke-dasharray

• stroke-dashOffset

学会这两个属性之后可以做很多有趣的动画，这里抛砖引玉，大家多多探索，欢迎私信交流。