如何在SVG中制作动画虚线（路径）

考虑一条像这个小提琴一样增长的线条。如何在SVG中制作动画虚线（路径）

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>

但是我怎么做到这一点用虚线？我使用“stroke-dashoffset”来制作路径动画，所以我不能用它来制作路径。

来源

2016-08-23 A.F.N

您可以尝试使用更长的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>

来源

2016-08-23 14:05:38 Christoph

如何在SVG中制作动画虚线（路径）

回答

相关问题