machen Kreis Weg von oben

Question

Ich habe sehr nahe erreicht, um meine Bedürfnisse zu erfüllen. Nur ein kleines Problem, das ich mit Berechnungen versucht zu spielen, aber steckte in 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>

ich brauche nur kleine Hilfe zu macht die Kreis Pfadanimation Start von oben. Ich mache etwas falsch mit der Berechnung, denke ich. Ich brauche nur die Animation wie this. Es verwendet jedoch ein js-Plugin von Drittanbietern, das ich nicht verwenden möchte.

Auch gibt es eine Möglichkeit, wie wir CSS in SVG einbetten können, so dass wir die Grafik als .svg mit Animation statt Svg-Code in HTML-Datei einfügen können?

Answer 1

Wenn Sie den Strich zu benötigen, beginnen Sie von der Oberseite des Kreises, Sie müssen den Pfad ändern, den Sie verwendet haben, um den Kreis zu erstellen. Ich machte einen anderen nach der Formel, die in this answer beschrieben ist. Ich habe es so modifiziert, dass der Pfad oben beginnt.

Dann können Sie den Umfang des Kreises (π * 2 * r) für die stroke-dasharray und stroke-dashoffset Werte berechnen:

.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>