Animation de cercle SVG contrôlée avec dashoffset

Question

J'essaie d'obtenir une transition en vol stationnaire sur le cercle svg (pas un 360deg complet, à peu près 80%). À mon avis, le code ci-dessous devrait faire, mais pour une raison quelconque, au lieu de simplement aller au point zéro, il ajoute une mini-arcade supplémentaire. Comment éviter cela?

.outer { 
 
    fill: transparent; 
 
    stroke: #333; 
 
    stroke-width: 3; 
 
    stroke-dasharray: 204; 
 
    stroke-dashoffset: 1; 
 
    transition: stroke-dashoffset 0.8s; 
 
} 
 

 
svg:hover .outer { 
 
    stroke-dashoffset: 204 !important; 
 
}

<svg width="90" height="90"> 
 
    <circle class="outer" cx="43" cy="43" r="40"/> 
 
</svg>

violon JS: https://jsfiddle.net/6vj81fmL/1/

Answer 1

C'est parce que votre stroke-dasharray initiale est trop courte pour couvrir toute la circonférence du cercle.

La circonférence semble être 252 donc donnez-lui un décalage initial de 50 (environ 20%), puis passez à un décalage égal au stroke-dasharray.

.outer { 
 
    fill: transparent; 
 
    stroke: #333; 
 
    stroke-width: 3; 
 
    stroke-dasharray: 252; 
 
    stroke-dashoffset: 50; 
 
    transition: stroke-dashoffset 0.8s; 
 
} 
 

 
svg:hover .outer { 
 
    stroke-dashoffset: 252 !important; 
 
}

<svg width="90" height="90"> 
 
    <circle class="outer" cx="43" cy="43" r="40"/> 
 
</svg>