faire le chemin du cercle commence par le haut

Question

J'ai atteint très près de combler mes besoins. Juste un petit problème que j'ai essayé de jouer avec des calculs, mais coincé dans Snippet:.

.path { 
 
    stroke-dasharray: 120; 
 
    stroke-dashoffset: -120; 
 
    animation: dash 3s linear infinite; 
 
} 
 

 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve"> 
 
<path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4 
 
\t c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z 
 
\t M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41 
 
\t h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2 
 
\t C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9 
 
\t C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9 
 
\t L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/> 
 
<path class="path" stroke="#232527" stroke-width="5" fill="#fff" d="M120.2,2.7c-14.1,0-25.6,11.5-25.6,25.6c0,14.1,11.5,25.6,25.6,25.6c14.1,0,25.6-11.5,25.6-25.6,25.6c14.1,0,25.6-11.5,25.6-25.6 
 
\t "/> 
 

 
</svg>

J'ai juste besoin petite aide pour faire le début du chemin du cercle d'animation de la haut. Je fais quelque chose de mal avec le calcul je suppose. J'ai juste besoin de l'animation comme this. Cependant, il utilise un plugin js tiers que je ne veux pas utiliser.

Existe-t-il un moyen d'intégrer css dans SVG pour que nous puissions avoir le graphique en .svg avec animation au lieu de mettre du code svg dans un fichier html?

Answer 1

Si vous souhaitez que le trait à commence par le haut du cercle, vous devez modifier le chemin que vous avez utilisé pour créer le cercle. J'ai fait un autre selon la formule décrite dans this answer. Je l'ai juste modifié pour que le chemin commence au sommet.

Ensuite, vous pouvez calculer le périmètre du cercle (π * 2 * r) pour les stroke-dasharray et stroke-dashoffset valeurs:

.path { 
 
    stroke-dasharray: 157; 
 
    stroke-dashoffset: -157; 
 
    animation: dash 6s linear infinite; 
 
} 
 

 
@keyframes dash { 
 
    to { stroke-dashoffset: 157; } 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve"> 
 
    <path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4 c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41 h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2 C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9 C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9 L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/> 
 
    <path class="path" stroke="#232527" stroke-width="5" fill="#fff" d="M120 28.3 m0 -25 a25 25 0 1 0 0 50 a25 25 0 1 0 0 -50" /> 
 
</svg>