Stop SVG animation automatically

knefie 0
Viewed 26

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>

svg
1 Answers

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>

Robert Longson0
Related