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>

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

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>

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

1 个答案: