How to change start point of svg line animation - html

Question

I use stroke-dasharray to create line animation when hovering it, would I have any way to change the start point?
as this photo
/* layout */
body {
margin: 50px;
}
.container{
left : 50%;
}
/* main */
.svg-outer:hover {
stroke-width: 8px;
stroke: rgba(255, 0, 0, 1);
animation: MaplogoConatinerStroke .25s linear 1;
}
#keyframes MaplogoConatinerStroke {
0% {
stroke-dasharray: 0 549.7;
}
100% {
stroke-dasharray: 549.7 0;
}
}
<div class="container">
Hover the logo
<svg xmlns="http://www.w3.org/2000/svg" class="svg-outer" viewBox="0 0 166.5 186.49">
<defs>
<style>
.svg-outer {
width: 25%;
overflow: initial!important;
}
.circle {
fill: rgba(0, 0, 0, 0.6);
}
</style>
</defs>
<g>
<g>
<path class="circle" d="M166.5,83.25a83.25,83.25,0,1,0-100,81.56v19.1a2.76,2.76,0,0,0,3.25,2.5c.69.35,34.46-19.69,45.67-26.36A83.27,83.27,0,0,0,166.5,83.25Z" />
</g>
</g>
</svg>
</div>

Answer 1

you can use stroke-dashoffset to change the starting point. with a bit of fiddeling around i came up with offset of 153...
/* layout */
body {
margin: 50px;
}
.container{
left : 50%;
}
/* main */
.svg-outer:hover {
stroke-width: 8px;
stroke: rgba(255, 0, 0, 1);
animation: MaplogoConatinerStroke .25s linear 1;
stroke-dashoffset: 153;
}
#keyframes MaplogoConatinerStroke {
0% {
stroke-dasharray: 0 549.7;
}
100% {
stroke-dasharray: 549.7 0;
}
}
<div class="container">
Hover the logo
<svg xmlns="http://www.w3.org/2000/svg" class="svg-outer" viewBox="0 0 166.5 186.49">
<defs>
<style>
.svg-outer {
width: 25%;
overflow: initial!important;
}
.circle {
fill: rgba(0, 0, 0, 0.6);
}
</style>
</defs>
<g>
<g>
<path class="circle" d="M166.5,83.25a83.25,83.25,0,1,0-100,81.56v19.1a2.76,2.76,0,0,0,3.25,2.5c.69.35,34.46-19.69,45.67-26.36A83.27,83.27,0,0,0,166.5,83.25Z" />
</g>
</g>
</svg>
</div>