SVG实现边框动画效果

用svg来实现当鼠标经过某个元素时，它的边框线条的一个动画效果

（原文实例演示连接：http://tympanus.net/Tutorials/BorderAnimationSVG/）
要用到的svg的一个属性是：stroke-dasharray，首先来看一张图

中间黄色的矩形是svg(width: 300px; height: 460px;)，然后设置四个方向的line（图中红黑相间的线条），线条长度有两种（上下相等900px，左右相等1380px）。
svg的坐标原点在其左上角的位置，坐标轴向右为正，向左为负；向下为正，向上为负。
svg的代码如下：

  <div class="box demo1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                     <line class="top" x1="0" y1="0" x2="900" y2="0"/>
                     <line class="left" x1="0" y1="460" x2="0" y2="-920"/>
                     <line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>
                     <line class="right" x1="300" y1="0" x2="300" y2="1380"/>
                 svg>
                 <h3>Dh3>
                 <span>Broccoli, Asparagus, Curryspan>
             div>

设置svg的stroke-dasharray的值：

.box svg line.top,
.box svg line.bottom {
    stroke-dasharray: 330 240;  /*dash的宽度为330，dash间的间距为240*/
}
.box svg line.left,
.box svg line.right {
    stroke-dasharray: 490 400;
}

其中，330为dash的宽度（图中黑色部分的线条），240为虚线之间的间隔（图中红色部分的线条）490与400同理。
要实现的动画效果是，当鼠标移入svg时，那些线条会顺时针移动（由于线条超出svg的大小范围，所以在一开始，超出部分是不可见的），现在线条被分隔成两部分（被红色分开的两段黑色线条），效果是，当鼠标移入时，线条的第一个黑色部分移出svg，随即第二个黑色部分移入，代码如下：

.box:hover svg line.top {
    -webkit-transform: translateX(-600px);
    transform: translateX(-600px);
}
.box:hover svg line.bottom {
    -webkit-transform: translateX(600px);
    transform: translateX(600px);
}
.box:hover svg line.left {
    -webkit-transform: translateY(920px);
    transform: translateY(920px);
}
.box:hover svg line.right {
    -webkit-transform: translateY(-920px);
    transform: translateY(-920px);
}