machen Kreis Weg von oben

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:.machen Kreis Weg von oben

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

Quelle

2016-05-24 Gitesh Dang

@RobertLongson Sie danken here..I zur Kommentierung erreicht haben soo viel in der Nähe von . Bitte kannst du mir helfen den Kreis voll zu füllen. –

Code-Snippet ausführen, Sie werden sehen, dass es nicht von der 0-Position aus beginnt, sondern zur Hälfte des Halbkreises. Ich will nur, dass es von 0 ausgeht. Ich schätze, ich vermisse einen Bogen. Recht? –

oh, das ist die zweite Frage nach diesem Fix :) Da CSS im style-Tag geschrieben wird .. können wir seine .svg als Bild erzeugen. –

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>

Quelle

2016-05-25 08:24:42

alternativ könnte man eine Rotationstransformation auf dem Pfad des OPs setzen –

machen Kreis Weg von oben

Antwort

Verwandte Themen