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>D</h3>
                 <span>Broccoli, Asparagus, Curry</span>
             </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);
}