Svg动画:虚线开始停止问题

Question

我正试图创建一个svg虚线动画，但没有成功，因为我下面没有给出的是我尝试过的代码

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
<style>
.path {
stroke-dasharray: 8,12;
stroke-dashoffset: 3000;
animation: dash 4s linear 0s forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 3000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<title>Path 5</title>
<desc>Created with Sketch.</desc>
<g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">
<g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">
<path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>
</g>
</g>
</svg>

上面的一个在运行，但我希望它从0开始；

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
<style>
.path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dash 4s linear 0s forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 3000;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<title>Path 5</title>
<desc>Created with Sketch.</desc>
<g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="8,12">
<g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">
<path class="path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>
</g>
</g>
</svg>

但是当尝试虚线不起作用时

怎么做

Answer 1

得到的答案

<svg width="1145px" height="564px" viewBox="0 0 1145 564" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.3 (67297) - http://www.bohemiancoding.com/sketch -->
<style>

.dashed-path {
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
animation: dashed-line 6s linear alternate 1;
}
@keyframes dashed-line {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 3000;
}
}
</style>
<g id="Final-Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="9">
<g id="home-1.3" transform="translate(-66.000000, -2558.000000)" stroke="#393535">
<path fill="none" stroke="#000000" stroke-linejoin="round" stroke-miterlimit="20" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299"/>
<path fill="none" stroke="white" stroke-width="20" stroke-linejoin="round" stroke-miterlimit="20" class="dashed-path" d="M839.909127,3120.85357 C889.933673,3122.25645 951.713106,3113.57927 1025.24742,3094.82204 C1135.5489,3066.68619 1174.0438,3040.73257 1202.35126,2951.20941 C1230.65872,2861.68626 1177.22615,2767.38954 1094.25601,2753.74792 C1011.28587,2740.1063 919.386433,2763.26392 877.413304,2777.75814 C835.440175,2792.25237 698.46686,2859.20581 542.287777,2859.20581 C386.108693,2859.20581 176.198811,2871.35943 125.440609,2836.40277 C74.6824063,2801.44611 38.5310665,2734.17865 97.3805838,2642.80649 C136.613595,2581.89172 187.182295,2554.18389 249.086682,2559.68299" id="Path-5"></path>
</g>
</g>
</svg>