I'm having trouble controlling an animated svg border using CSS - css

Question

I've been trying to animate a svg border, I've gotten as far as this
html {
background: white;
}
div {
position: fixed;
height: 200px;
width: 605px;
position: fixed;
left: 30%
}
.mainNav {
position: fixed;
top: 6;
}
[class="navBorder"] .outline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
stroke: #7272f8;
stroke-width: 11px;
fill: none;
}
.navBorder .outline {
stroke-dasharray: 2000;
stroke-dashoffset: 1900;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.navBorder:hover .outline {
stroke-dasharray: 1100 0;
stroke-dashoffset: 0;
}
<div>
<a class="navBorder" target="_blank">
<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<rect class="outline" height="100%" width="100%" />
</svg>
</a>
</div>
http://codepen.io/lorehill/pen/pEPXar
The problem is I can't seem to get the starting position of the border to be on the top center and then close center bottom.
I'm very confused trying to figure out how to calculate the values I need to set stroke-dasharray and stroke-dashoffset for the starting position in order to get the effect I'm after.
If anyone could explain it like I'm 5 that would be fantastic.
Thank you!

Answer 1

AFAIK, the starting position of the stroke is always the starting point of the rect which is top left for a rect element.
I can't seem to get the starting position of the border to be on the top center and then close center bottom.
I think you'll need two polyline elements for that, although you can use the same class on both.
svg {
height: 100px;
margin: 1em;
}
.outline {
fill: lightblue;
stroke-dasharray: 200;
stroke-dashoffset: 190;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
svg:hover .outline {
stroke-dasharray: 200 0;
stroke-dashoffset: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">
<polyline class="outline" points="50,0 100,0, 100,100 50,100" style="stroke:#660000; stroke-width: 3;" />
<polyline class="outline" points="50,0 0,0 0,100 50,100" style="stroke:#660000; stroke-width: 3;" />
</svg>
Codepen Demo