title: How to stop the animation and freeze the image when pressing the `Stop` button
body: <p>I created a layout of the working planetary gear.</p>
  <p>When you click on the <code>Stop</code> button, the animation of the rotation of the gears should stop and the image “freeze”.</p>
  <p>But in reality the image returns to its original state. This can be seen on the yellow markers on the gears.</p>
  <p>Below is the code I’ve made at the moment:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" &gt;
    &lt;title&gt;animation planetary mechanism&lt;/title&gt;
    &lt;defs&gt;
      &lt;marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"&gt;
        &lt;rect width="14" height="10" rx="2" fill="#22211D" /&gt;
      &lt;/marker&gt;
      &lt;line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;
                   marker-end: url(#MarkerArrow);
                   marker-start: url(#MarkerArrow);
                 stroke:#22211D; stroke-width:6; "&gt;
      &lt;/line&gt;
      &lt;marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20"&gt;
        &lt;rect width="7" height="3.5" rx="2" fill="#22211D" /&gt;
      &lt;/marker&gt;
      &lt;line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;
               marker-end: url(#MarkerArrow-s1);
               marker-start: url(#MarkerArrow-s);
             stroke:#22211D; stroke-width:2; "&gt;
  
      &lt;/line&gt;
      &lt;linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad"&gt;
        &lt;stop offset="0%" stop-color="powderblue" /&gt;
        &lt;stop offset="100%" stop-color="lightgreen" /&gt;
      &lt;/linearGradient&gt;
  
    &lt;/defs&gt;
    &lt;rect width="100%" height="100%" fill="url(#vertical)" /&gt;
    &lt;g transform="translate(90,50)"&gt;
  
      &lt;g id="wheel"&gt;
        &lt;g&gt;
          &lt;animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" /&gt;
          &lt;use xlink:href="#line1" transform="rotate(0 100 100)" /&gt;
          &lt;use xlink:href="#line1" transform="rotate(120 100 100)" /&gt;
          &lt;use xlink:href="#line1" transform="rotate(240 100 100)" /&gt;
  
  
          &lt;circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" /&gt;
          &lt;circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" /&gt;
          &lt;circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" /&gt;
          &lt;circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /&gt;
        &lt;/g&gt;
      &lt;/g&gt;
  
      &lt;g id="col-small"&gt;
  
        &lt;g&gt;
          &lt;animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" /&gt;
          &lt;use xlink:href="#line-s" transform="rotate(0 188 100)" /&gt;
          &lt;use xlink:href="#line-s" transform="rotate(120 188 100)" /&gt;
          &lt;use xlink:href="#line-s" transform="rotate(240 188 100)" /&gt;
  
          &lt;circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" /&gt;
          &lt;circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" /&gt;
          &lt;circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" /&gt;
          &lt;circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /&gt;
  
        &lt;/g&gt;
      &lt;/g&gt;
      
      &lt;g id="planetar"&gt;
        &lt;g&gt;
          &lt;animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" /&gt;
  
          &lt;circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" /&gt;
          &lt;circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" /&gt;
          &lt;circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " /&gt;
        &lt;/g&gt;
      &lt;/g&gt;
  
      &lt;g&gt;
        &lt;use xlink:href="#col-small" transform="rotate(240 100 100)" /&gt;
        &lt;use xlink:href="#col-small" transform="rotate(120 100 100)" /&gt;
      &lt;/g&gt;
  
      &lt;g transform="translate(-10,160)"&gt;
        &lt;g id="gO1"&gt;
          &lt;rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" /&gt;
          &lt;text x="62" y="102" font-size="16" fill="yellow"&gt;GO&lt;/text&gt;
        &lt;/g&gt;
        &lt;g id="stop1"&gt;
          &lt;rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" /&gt;
          &lt;text x="120" y="102" font-size="16" fill="yellow"&gt;STOP&lt;/text&gt;
        &lt;/g&gt;
      &lt;/g&gt;
  
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Question:</strong></p>
  <p>How to make it so that when you click the <code>Stop</code> button the image stops in the current state and the next time you press the <code>GO</code> button, the animation does not start from the beginning, but from the locked state.</p>
  <p>I could not do it. I will be grateful for any solution.</p>