Drehen Sie den Startpunkt der SVG-Animation

Question

Also versuche ich Svg-Animationen zu verstehen.

Aus irgendeinem Grund wird meine Drehung des Startpunktes nicht funktionieren.
Siehe folgende Animation.
Ich möchte die Animationszeile von der anderen Seite starten.
Nach this explanation habe ich festgestellt, dass ich die Rotation verwenden muss.
Aber wenn ich das benutze, taucht es nicht auf.Was fehlt mir?

Also habe ich transform="rotate(180)" zum Pfad der Linie hinzugefügt.
HINWEIS: Ich habe dem aktuellen Snippet keine Drehung hinzugefügt.

body { 
 
\t background: #85d1d3; \t 
 
} 
 
.container{ 
 
\t max-width:400px; 
 
\t margin: 0 auto; 
 
} 
 

 
@keyframes line-color-ffffff { \t 0% {fill: #85d1d3;} \t 50% {fill: #85d1d3; \t stroke-dashoffset: 0;} \t 100% {fill: #85d1d3;stroke-dashoffset: 0;} } 
 

 
.line-color-ffffff{animation: line-color-ffffff 4s ease forwards; stroke-dasharray: 20; stroke-dashoffset: 199;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"> 
 
    <title>svg</title> 
 
    <g id="background"> 
 
    <rect width="400" height="400" fill="#85d1d3"/> 
 
    </g> 
 
    <g> 
 
\t \t <path class="line-color-ffffff" d="M471.954 512.869 467.207 510.091 464.528 508.522 406.469 474.539 401.11 471.402 396.364 468.624 401.085 465.803 403.354 464.447 439.663 442.751 444.201 440.039 448.923 437.218 444.159 434.468 441.628 433.007 415.474 417.907 410.412 414.984 405.649 412.234" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/> 
 
    </g> 
 
    </svg>

Answer 1

Sein zu eigentlich ganz einfach zu lösen, schalten Sie nur mit den 100% diejenigen, die 0% fill out!

@keyframes line-color-ffffff { 0% {fill: #85d1d3;stroke-dashoffset: 0;} 50% {fill: #85d1d3; stroke-dashoffset: 0;} 100%{fill: #85d1d3;} } 

Hier ist ein funktionierendes Geige aswell: https://jsfiddle.net/g6Lpcmqe/