ストロークダッシュオフセットのアニメートでは形状を閉じることができません

Question

ダッシュオフセットアニメーション技術を使用して簡単なスピナーを作成しています。あなたは私がhereを持っているのを見ることができます。あなたが見ることができるように、多角形は決して閉じません。マイターコーナーを上に置くのではなく、パスが図形を完成させるようにする簡単な方法はありますか？

SVGのパスを上書きして、最終コーナーを完成させることができます。残念ながら、それは理想的ではないアニメーションで覆い隠すことができます。

HTML

<div class="logo-container"> 
    <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632"> 
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/> 
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/> 
    </svg> 
</div> 

CSS

.logo-container { 
    width: 400px; 
    .is2-logo path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
    } 
    .blue-path { 
    animation: dash 2s linear forwards infinite; 
    } 
    .gray-path { 
    animation: dash 2s linear forwards infinite .5s; 
    } 
} 

@keyframes dash { 
    0% { 
    stroke-dashoffset: 1000; 
    } 
    50% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: -1000; 
    } 
} 

Answer 1

ではなく、上部にあるマイターコーナーを残すの形状を完了します。

実際には、上部にバットのラインキャップが残っています。

灰色のような丸い線が青い線になるのはなぜですか？

.logo-container { 
 
    width: 400px; 
 
} 
 
.logo-container .is2-logo path { 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
} 
 
.logo-container .blue-path { 
 
    animation: dash 5s linear forwards infinite; 
 
} 
 
.logo-container .gray-path { 
 
    animation: dash 5s linear forwards infinite .5s; 
 
} 
 

 
@keyframes dash { 
 
    0% { 
 
    stroke-dashoffset: 1000; 
 
    } 
 
    50% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: -1000; 
 
    } 
 
}

<div class="logo-container"> 
 
    <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632"> 
 
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linecap="round" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/> 
 
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/> 
 
    </svg> 
 
</div>

Answer 2

なぜあなたはちょうど同じオフセットをダッシュ​​を残して、他の足でパスを拡張しない：

<svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632"> 
 
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3 l106.08 -61.04 106.08 61.04" marker-end="url(#gray-start)"/> 
 
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225 l106.08 61.04 -106.08 61.032 L15.724 70.265 l106.08 -61.04 106.08 61.04"/> 
 
    </svg>