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>

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

Svg Animation : dashed line start to stop issue

css

animation

svg

svg-animate