How to stroke from top-center of rounded rectangle

I want to make a button out of SVG and replicate the YouTube's autoplay circle. I have been trying to get the stroke to start and end at the top-center, but it will start best at the top-left corner, because when I start changing stroke-dasharry and stroke-dashoffset numbers around it starts to go off at the start or end. I know this would be a lot easier with a circle, but I want to see if this is at all possible. It is starting to seem that it is not. svg:hover { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } } <svg width="160" height="80"> <a xlink:href="/next_video" target="_self"> <rect class="path" height="70" width="130" y="5" x="5" rx="35" stroke="#eee" stroke-width="8px" /> <rect height="60" width="120" y="10" x="10" rx="30" fill="#00a6bc" /> <text fill="#eee" text-anchor="middle" y="45" x="70">Next video</text> </a> </svg>