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

【问题标题】：How make a animated dashed line (path) in SVG如何在 SVG 中制作动画虚线（路径）
【发布时间】：2016-08-23 07:22:44
【问题描述】：

考虑一条像小提琴一样长的线。

 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”来制作路径动画，所以我不能用它来制作路径虚线。

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：