How to stop the animation and freeze the image when pressing the `Stop` button

  • A+
Category:Languages

I created a layout of the working planetary gear.

When you click on the Stop button, the animation of the rotation of the gears should stop and the image “freeze”.

But in reality the image returns to its original state. This can be seen on the yellow markers on the gears.

Below is the code I’ve made at the moment:

<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" >   <title>animation planetary mechanism</title>   <defs>     <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">       <rect width="14" height="10" rx="2" fill="#22211D" />     </marker>     <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; ">     </line>     <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">       <rect width="7" height="3.5" rx="2" fill="#22211D" />     </marker>     <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; ">      </line>     <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">       <stop offset="0%" stop-color="powderblue" />       <stop offset="100%" stop-color="lightgreen" />     </linearGradient>    </defs>   <rect width="100%" height="100%" fill="url(#vertical)" />   <g transform="translate(90,50)">      <g id="wheel">       <g>         <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />         <use xlink:href="#line1" transform="rotate(0 100 100)" />         <use xlink:href="#line1" transform="rotate(120 100 100)" />         <use xlink:href="#line1" transform="rotate(240 100 100)" />           <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />         <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />         <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />         <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />       </g>     </g>      <g id="col-small">        <g>         <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />         <use xlink:href="#line-s" transform="rotate(0 188 100)" />         <use xlink:href="#line-s" transform="rotate(120 188 100)" />         <use xlink:href="#line-s" transform="rotate(240 188 100)" />          <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />         <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />         <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />         <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />        </g>     </g>          <g id="planetar">       <g>         <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />          <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />         <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />         <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />       </g>     </g>      <g>       <use xlink:href="#col-small" transform="rotate(240 100 100)" />       <use xlink:href="#col-small" transform="rotate(120 100 100)" />     </g>      <g transform="translate(-10,160)">       <g id="gO1">         <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />         <text x="62" y="102" font-size="16" fill="yellow">GO</text>       </g>       <g id="stop1">         <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />         <text x="120" y="102" font-size="16" fill="yellow">STOP</text>       </g>     </g>    </g> </svg>

Question:

How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state.

I could not do it. I will be grateful for any solution CSS,JS, SVG or a combination of them.

 


I have made some changes in the snippet. Please have a look and let me know if this is what you want.

<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" onload='Init(evt)' id = "SVGRoot">   <title>animation planetary mechanism</title>   <defs>     <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">       <rect width="14" height="10" rx="2" fill="#22211D" />     </marker>     <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; ">     </line>     <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">       <rect width="7" height="3.5" rx="2" fill="#22211D" />     </marker>     <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; ">      </line>     <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">       <stop offset="0%" stop-color="powderblue" />       <stop offset="100%" stop-color="lightgreen" />     </linearGradient>    </defs>   <rect width="100%" height="100%" fill="url(#vertical)" />   <g transform="translate(90,50)">      <g id="wheel">       <g>         <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />         <use xlink:href="#line1" transform="rotate(0 100 100)" />         <use xlink:href="#line1" transform="rotate(120 100 100)" />         <use xlink:href="#line1" transform="rotate(240 100 100)" />           <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />         <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />         <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />         <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />       </g>     </g>      <g id="col-small">        <g>         <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />         <use xlink:href="#line-s" transform="rotate(0 188 100)" />         <use xlink:href="#line-s" transform="rotate(120 188 100)" />         <use xlink:href="#line-s" transform="rotate(240 188 100)" />          <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />         <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />         <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />         <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />        </g>     </g>          <g id="planetar">       <g>         <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />          <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />         <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />         <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />       </g>     </g>      <g>       <use xlink:href="#col-small" transform="rotate(240 100 100)" />       <use xlink:href="#col-small" transform="rotate(120 100 100)" />     </g>      <g transform="translate(-10,160)">       <g id="gO1" onclick='Play()'>         <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />         <text x="62" y="102" font-size="16" fill="yellow">GO</text>       </g>       <g id="stop1" onclick='Pause()'>         <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />         <text x="120" y="102" font-size="16" fill="yellow">STOP</text>       </g>     </g>    </g> </svg> <script>   var SVGDocument = null;   var SVGRoot = null;   var pauseButton = null;   var playButton = null;   var innerCircle = null;   var outerCircle = null;   var smallerCircle = null;    function Init(evt)   {        SVGDocument = evt.target.ownerDocument;      SVGRoot = SVGDocument.getElementById('SVGRoot')       pauseButton = SVGDocument.getElementById('stop1');      playButton = SVGDocument.getElementById('gO1');      innerCircle = SVGDocument.getElementById('innerCircle');;      outerCircle = SVGDocument.getElementById('outerCircle');;      smallerCircle = SVGDocument.getElementById('smallerCircle');;   };    function Pause()   {        SVGRoot.pauseAnimations();   };    function Play()   {      if(SVGRoot.animationsPaused()){         SVGRoot.unpauseAnimations();      }      else{          innerCircle.beginElement();          outerCircle.beginElement();          smallerCircle.beginElement();      }   };     </script>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: