svgアニメーションの開始点を回転する

Question

私はsvgアニメーションを理解しようとしています。

何らかの理由で私の出発点の回転がうまくいかない。
次のアニメーションを参照してください。
もう一方の側からアニメーションラインを開始したいです。
this explanationに続いて、回転を使用する必要があることがわかりました。
しかし、それを使用しても表示されません。何が欠けていますか？

私はtransform="rotate(180)"を行のパスに追加しました。
注：現在のスニペットにローテーションを追加しませんでした。

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

実際にはかなり簡単なそのあまりにもわずか100％のもので、0％の塗りつぶしを切り替える、解決！ここで

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

は作業フィドルaswellです：https://jsfiddle.net/g6Lpcmqe/