SVGでアニメーション化された破線（パス）を作るには

Question

このフィドルのように成長する線を考えてみましょう。

svg #path { 
 
    stroke-dasharray: 19; 
 
    stroke-dashoffset: 19; 
 
    animation: dash 4s linear 0s forwards; 
 
} 
 

 
@keyframes dash { 
 
    from { 
 
     stroke-dashoffset: 19; 
 
    } 
 

 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
}

   <svg viewBox="0 1 4.8666667 7.2777778" width="438px" height="655px"> 
 
        <path id="path" fill="none" stroke="darkgoldenrod" stroke-width=".06" stroke-dashoffset="19" stroke-dasharray="19" 
 
          d="M 3.5465404,3.034946 C 3.4354313,3.6265215 4.030817,3.0359535 4.1671536,3.55319 4.2794157,4.1144845 3.4363811,4.1431996 3.0741807,4.4032244 2.4391877,4.9662761 4.4061645,6.2801514 4.3786782,6.7247724 4.4096446,7.0948023 4.0390679,7.0007891 3.8245189,7.429004 3.7009337,7.6691977 3.3346032,7.6270496 2.8948462,7.6490553 2.4536728,7.6318087 1.6152485,7.8291298 1.0767182,7.6694802 0.73107147,7.5240403 0.80398481,7.2706043 0.80398481,7.2706043 0.83861231,6.866754 1.5732839,7.0445965 1.7753715,6.5292039 1.953487,5.950891 1.7063462,5.2323625 1.511576,5.18339 1.1230225,5.0822327 0.82998045,5.712977 0.41672909,5.2491666 0.28482631,5.098227 0.24895285,4.7880749 0.46248017,4.5821824 0.7446934,4.3573654 1.0821233,4.6451318 1.3127029,4.5397796 c 0.1144564,-0.024614 0.030353,-0.2123847 0.0053,-0.9407053"> 
 
        </path> 
 
       </svg>

しかし、私は、破線でこれを行う方法？私は "ストロークダッシュオフセット"を使ってパスをアニメーションにするので、パスを破線にするために使用することはできません。

Answer 1

長めの数字を使用してみることもできます。stroke-dasharray私はそれを正しくするために値で少し演奏しなければならないと思います。

svg #path { 
 
    stroke-dasharray: 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 0.5 19; 
 
    stroke-dashoffset: 19; 
 
    animation: dash 4s linear 0s forwards; 
 
} 
 

 
@keyframes dash { 
 
    from { 
 
     stroke-dashoffset: 19; 
 
    } 
 

 
    to { 
 
     stroke-dashoffset: 0; 
 
    } 
 
}

   <svg viewBox="0 1 4.8666667 7.2777778" width="438px" height="655px"> 
 
        <path id="path" fill="none" stroke="darkgoldenrod" stroke-width=".06" stroke-dashoffset="19" stroke-dasharray="19" 
 
          d="M 3.5465404,3.034946 C 3.4354313,3.6265215 4.030817,3.0359535 4.1671536,3.55319 4.2794157,4.1144845 3.4363811,4.1431996 3.0741807,4.4032244 2.4391877,4.9662761 4.4061645,6.2801514 4.3786782,6.7247724 4.4096446,7.0948023 4.0390679,7.0007891 3.8245189,7.429004 3.7009337,7.6691977 3.3346032,7.6270496 2.8948462,7.6490553 2.4536728,7.6318087 1.6152485,7.8291298 1.0767182,7.6694802 0.73107147,7.5240403 0.80398481,7.2706043 0.80398481,7.2706043 0.83861231,6.866754 1.5732839,7.0445965 1.7753715,6.5292039 1.953487,5.950891 1.7063462,5.2323625 1.511576,5.18339 1.1230225,5.0822327 0.82998045,5.712977 0.41672909,5.2491666 0.28482631,5.098227 0.24895285,4.7880749 0.46248017,4.5821824 0.7446934,4.3573654 1.0821233,4.6451318 1.3127029,4.5397796 c 0.1144564,-0.024614 0.030353,-0.2123847 0.0053,-0.9407053"> 
 
        </path> 
 
       </svg>