Stop SVG animation automatically-CodePudding

I created an SVG animation for the first time. This SVG animation is meant to build from right to left. it is working. Unfortunately, the animation dissolves again. I can't find the error or I don't know why. Now I'm interested on the one hand in how I manage to stop the animation automatically when it's finished and on the other hand in how it evenly dissolves again.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1920 319" style="enable-background:new 0 0 1920 319;" xml:space="preserve">
  <g>
    <line fill="none" stroke-width="2" stroke="red" stroke-dasharray="2000" stroke-dashoffset="2000" x1="1920" y1="156" x2="275" y2="156">
      <animate id="p1"
        attributeName="stroke-dashoffset"
         begin="0.1s"
         values="2037;0;2037"
         dur="15s"
         calcMode="linear"
     />
    </line>
  </g>
  <g>
    <circle fill="none" stroke-width="2" stroke="red" stroke-dasharray="2000" stroke-dashoffset="2000" cx="149" cy="157" r="126">
      <animate id="p2"
        attributeName="stroke-dashoffset"
         begin="6.1s"
         values="2037;0;2037"
         dur="15s"
         calcMode="linear"
     />
    </circle>
  </g>
</svg>

CodePudding user response：

You need various adjustments.

Defining a constant pathLength makes everything easier, you can then set all your stroke-dasharray and stroke-dashoffsets to that value.
If you don't want the animations to undo then you need to change the values attribute so it doesn't unwind
Now the animations only do half of what they used to do, you need them to run them in a shorter time. They didn't really finish when they stopped changing the rendering either because the path lengths weren't the same as the stroke-dashoffset or stroke-dasharray values.
Since the first animation ends when expected, you can start the second animation when the first finishes.
fill="freeze" keeps the animations as they last were when they finished.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1920 319" style="enable-background:new 0 0 1920 319;" xml:space="preserve">
  <g>
    <line fill="none" stroke-width="2" stroke="red" stroke-dasharray="100" stroke-dashoffset="100" x1="1920" y1="156" x2="275" y2="156" pathLength="100">
      <animate id="p1"
        attributeName="stroke-dashoffset"
         begin="0.1s"
         values="100;0"
         dur="3s"
         calcMode="linear"
         fill="freeze"
     />
    </line>
  </g>
  <g>
    <circle fill="none" stroke-width="2" stroke="red" stroke-dasharray="100" stroke-dashoffset="100" pathLength="100" cx="149" cy="157" r="126">
      <animate id="p2"
        attributeName="stroke-dashoffset"
         begin="p1.end"
         values="100;0"
         dur="3s"
         calcMode="linear"
         fill="freeze"
     />
    </circle>
  </g>
</svg>