SVG line stays in screen after leaving mouse - css

Question

I've made a div, with 4 svg lines in it.
When hovering the div, the x- and y-axis changes using transition and transform.
Everything works fine, got it working but when i leave the mouse from the hover field, the svg line stays just a couple pixels in screen.
Check the example at the bottom of the page..
Any explanations/solutions will be very appreciated.
HTML:
<div class="blok">
<svg width="200" height="100">
<line class="left" x1="0" y1="0" x2="0" y2="-100"/>
<line class="bottom" x1="-200" y1="100" x2="0" y2="100"/>
<line class="right" x1="200" y1="100" x2="200" y2="200"/>
<line class="top" x1="200" y1="0" x2="400" y2="0"/>
</svg>
</div>
CSS:
.blok{
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
background: #ddd;
}
svg {
position: absolute;
top: 0;
left: 0;
}
svg line {
stroke-width: 10;
stroke: #000;
fill: none;
}
svg line.top, line.bottom {
stroke-dasharray: 200;
-webkit-transition: -webkit-transform .2s ease-out;
transition: transform .2s ease-out;
}
svg line.left, line.right {
stroke-dasharray: 100;
-webkit-transition: -webkit-transform .1s ease-out;
transition: transform .1s ease-out;
}
svg line.top{
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
svg line.right{
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
svg line.bottom{
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
svg line.left{
-webkit-transition-delay: .5s;
transition-delay: .5s;
}
.blok:hover svg line.left {
-webkit-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.blok:hover svg line.bottom {
-webkit-transform: translateX(200px);
transform: translateX(200px);
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
.blok:hover svg line.right {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
.blok:hover svg line.top {
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
JsFiddle HERE

Answer 1

You could simplify the whole thing and have a single line around the rectangle and transition the stroke-dashoffset rather than moving four individual lines.
SVG
<svg width="200" height="100">
<polyline class="line" points="0,0, 0,100, 200,100, 200,0 0,0"/>
</svg>
CSS
svg .line {
stroke-width: 10;
stroke: #000;
fill: none;
stroke-dasharray: 600;
stroke-dashoffset: 600;
}
svg .line {
stroke-dashoffset: 600;
-webkit-transition: stroke-dashoffset 0.5s ease-out;
transition: stroke-dashoffset 0.5s ease-out;
}
.blok:hover svg .line {
stroke-dashoffset: 0;
-webkit-transition: stroke-dashoffset 0.5s ease-out;
transition: stroke-dashoffset 0.5s ease-out;
}
Demo here

Answer 2

Try starting the lines from outside the svg
<div class="blok">
<svg width="200" height="100">
<line class="left" x1="0" y1="-5" x2="0" y2="-100"/>
<line class="bottom" x1="-205" y1="100" x2="0" y2="100"/>
<line class="right" x1="200" y1="105" x2="200" y2="205"/>
<line class="top" x1="205" y1="0" x2="400" y2="0"/>
</svg>
</div>
http://jsfiddle.net/shedali/vr8xj27n/