How to stop the animation and freeze the image when pressing the `Stop` buttonBeginning and pausing SVG...
Democratic Socialism vs Social Democracy
Critique vs nitpicking
Does the US government have any planning in place to ensure there's no shortages of food, fuel, steel and other commodities?
Other than edits for international editions, did Harry Potter and the Philosopher's Stone receive errata?
why typing a variable (or expression) prints the value to stdout?
What is an efficient way to digitize a family photo collection?
Why did Luke use his left hand to shoot?
Word for something that's always reliable, but never the best?
What does an unprocessed RAW file look like?
Is Screenshot Time-tracking Common?
The No-Straight Maze
Allow console draw poker game to output more hands
Create linguistic diagram (in TikZ?)
How much light is too much?
Prevent Nautilus / Nemo from creating .Trash-1000 folder in mounted devices
Crack the bank account's password!
How do dictionaries source attestation?
What species should be used for storage of human minds?
Plausible reason for gold-digging ant
Charging phone battery with a lower voltage, coming from a bike charger?
What is the draw frequency for 3 consecutive games (same players; amateur level)?
How bad is a Computer Science course that doesn't teach Design Patterns?
How can I handle players killing my NPC outside of combat?
Taking an academic pseudonym?
How to stop the animation and freeze the image when pressing the `Stop` button
Beginning and pausing SVG animations on hoverWhen to use IMG vs. CSS background-image?How can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?How can I create a “Please Wait, Loading…” animation using jQuery?How do I combine a background-image and CSS3 gradient on the same element?How do I auto-resize an image to fit a div containerHow to decide when to use Node.js?How to check a radio button with jQuery?How to vertically align an image inside a div?How do I animate constraint changes?
6
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.
javascript css animation svg
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
add a comment |
6
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.
javascript css animation svg
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
2
You can find a CSS solution here But need to change animation from SMIL style to CSS style
– Duannx
3 hours ago
@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision
– Alexandr_T
3 hours ago
1
This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.
– enxaneta
2 hours ago
@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.
– Alexandr_T
2 hours ago
add a comment |
6
6
6
2
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.
javascript css animation svg
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
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.
<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><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>javascript css animation svg
javascript css animation svg
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
edited 2 hours ago
Alexandr_T
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
asked 4 hours ago
Alexandr_TAlexandr_T
2,0992518
2,0992518
2
You can find a CSS solution here But need to change animation from SMIL style to CSS style
– Duannx
3 hours ago
@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision
– Alexandr_T
3 hours ago
1
This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.
– enxaneta
2 hours ago
@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.
– Alexandr_T
2 hours ago
add a comment |
2
You can find a CSS solution here But need to change animation from SMIL style to CSS style
– Duannx
3 hours ago
@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision
– Alexandr_T
3 hours ago
1
This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.
– enxaneta
2 hours ago
@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.
– Alexandr_T
2 hours ago
2
2
You can find a CSS solution here But need to change animation from SMIL style to CSS style
– Duannx
3 hours ago
You can find a CSS solution here But need to change animation from SMIL style to CSS style
– Duannx
3 hours ago
@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision
– Alexandr_T
3 hours ago
@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision
– Alexandr_T
3 hours ago
1
1
This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.
– enxaneta
2 hours ago
This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.
– enxaneta
2 hours ago
@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.
– Alexandr_T
2 hours ago
@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.
– Alexandr_T
2 hours ago
add a comment |
3 Answers
3
active
oldest
votes
3
Here is a trick/hack using CSS. The idea is to rely on transition to have the rotation then you play with the duration to create the illusion of freezing. By setting a big value you make the transition very very slow thus it will be stopped for us.
You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.
$('#gO1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
#col-small,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
#col-small.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
#col-small.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>
<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>
<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>UPDATE
The below one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:
$('#gO1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
.col-small g,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
.col-small g.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
.col-small g.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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 class="col-small">
<g>
<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>
<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 class="col-small" transform="rotate(240 100 100)">
<g>
<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 class="col-small" transform="rotate(120 100 100)">
<g>
<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 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>answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
Good answer, but 2 of the gears in your snippet do not rotate
– souzan
1 hour ago
@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome
– Temani Afif
1 hour ago
1
@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?
– Temani Afif
1 hour ago
1
@Alexandr_T oops, I removed more than the animation .. will fix it
– Temani Afif
1 hour ago
2
@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p
– Temani Afif
1 hour ago
|
show 8 more comments
2
Here is the simple code snipet i create to simulate the idea. All you need is
- Change SMIL style to CSS style (Don't use
animateTransform. Use csstransformpropertive). - Toggle
animation-play-statewhen click the button
const runBtn = document.getElementById('runBtn')
const pauseBtn = document.getElementById('pauseBtn')
const circle = document.getElementById('circle')
runBtn.addEventListener('click', () => {
if (!circle.classList.contains('running')) {
circle.classList.add('running')
}
})
pauseBtn.addEventListener('click', () => {
circle.classList.remove('running')
})body {
text-align: center;
}
#circle {
animation: rotate 3s linear infinite;
transform-origin: 200px 200px;
animation-play-state: paused;
}
#circle.running {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">
<g id="circle">
<circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>
<circle cx="200" cy="100" r="5" fill="yellow"/>
</g>
</svg><br>
<button id="runBtn">run</button>
<button id="pauseBtn">pause</button>answered 38 mins ago
DuannxDuannx
3,4331332
Try to transfer your decision to an example from my question. (+)
– Alexandr_T
30 mins ago
1
@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself
– Duannx
11 mins ago
Thanks for the example. This expanded my knowledge.I will find a way to thank you again
– Alexandr_T
7 mins ago
add a comment |
1
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>answered 4 hours ago
Kumar AmanKumar Aman
1315
3
Sorry, but the terms of the decision were: "How to make it so that when you click theStopbutton the image stops in the current state and the next time you press theGObutton, the animation does not start from the beginning, but from the locked state "
– Alexandr_T
3 hours ago
1
I have updated the snippet to fit the requirement
– Kumar Aman
24 mins ago
At first glance, everything is fine and I like it. I will study your decision
– Alexandr_T
15 mins ago
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54860601%2fhow-to-stop-the-animation-and-freeze-the-image-when-pressing-the-stop-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
Here is a trick/hack using CSS. The idea is to rely on transition to have the rotation then you play with the duration to create the illusion of freezing. By setting a big value you make the transition very very slow thus it will be stopped for us.
You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.
$('#gO1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
#col-small,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
#col-small.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
#col-small.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>
<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>
<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>UPDATE
The below one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:
$('#gO1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
.col-small g,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
.col-small g.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
.col-small g.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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 class="col-small">
<g>
<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>
<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 class="col-small" transform="rotate(240 100 100)">
<g>
<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 class="col-small" transform="rotate(120 100 100)">
<g>
<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 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>answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
Good answer, but 2 of the gears in your snippet do not rotate
– souzan
1 hour ago
@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome
– Temani Afif
1 hour ago
1
@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?
– Temani Afif
1 hour ago
1
@Alexandr_T oops, I removed more than the animation .. will fix it
– Temani Afif
1 hour ago
2
@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p
– Temani Afif
1 hour ago
|
show 8 more comments
3
Here is a trick/hack using CSS. The idea is to rely on transition to have the rotation then you play with the duration to create the illusion of freezing. By setting a big value you make the transition very very slow thus it will be stopped for us.
You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.
$('#gO1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
#col-small,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
#col-small.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
#col-small.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>
<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>
<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>UPDATE
The below one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:
$('#gO1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
.col-small g,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
.col-small g.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
.col-small g.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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 class="col-small">
<g>
<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>
<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 class="col-small" transform="rotate(240 100 100)">
<g>
<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 class="col-small" transform="rotate(120 100 100)">
<g>
<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 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>answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
Good answer, but 2 of the gears in your snippet do not rotate
– souzan
1 hour ago
@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome
– Temani Afif
1 hour ago
1
@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?
– Temani Afif
1 hour ago
1
@Alexandr_T oops, I removed more than the animation .. will fix it
– Temani Afif
1 hour ago
2
@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p
– Temani Afif
1 hour ago
|
show 8 more comments
3
3
3
Here is a trick/hack using CSS. The idea is to rely on transition to have the rotation then you play with the duration to create the illusion of freezing. By setting a big value you make the transition very very slow thus it will be stopped for us.
You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.
$('#gO1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
#col-small,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
#col-small.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
#col-small.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>
<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>
<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>UPDATE
The below one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:
$('#gO1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
.col-small g,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
.col-small g.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
.col-small g.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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 class="col-small">
<g>
<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>
<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 class="col-small" transform="rotate(240 100 100)">
<g>
<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 class="col-small" transform="rotate(120 100 100)">
<g>
<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 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>answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
Here is a trick/hack using CSS. The idea is to rely on transition to have the rotation then you play with the duration to create the illusion of freezing. By setting a big value you make the transition very very slow thus it will be stopped for us.
You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.
$('#gO1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
#col-small,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
#col-small.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
#col-small.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>
<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>
<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>UPDATE
The below one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:
$('#gO1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
.col-small g,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
.col-small g.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
.col-small g.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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 class="col-small">
<g>
<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>
<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 class="col-small" transform="rotate(240 100 100)">
<g>
<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 class="col-small" transform="rotate(120 100 100)">
<g>
<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 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>$('#gO1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
#col-small,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
#col-small.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
#col-small.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>
<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>
<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>$('#gO1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
#col-small,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
#col-small.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
#col-small.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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>
<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>
<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>$('#gO1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
.col-small g,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
.col-small g.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
.col-small g.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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 class="col-small">
<g>
<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>
<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 class="col-small" transform="rotate(240 100 100)">
<g>
<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 class="col-small" transform="rotate(120 100 100)">
<g>
<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 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>$('#gO1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');
})
$('#stop1').click(function() {
$('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');
})#wheel,
.col-small g,
#planetar{
transform-box:fill-box;
transform-origin:center;
}
#wheel.rotate{
transform:rotate(36000deg);
transition:1400s linear;
}
#planetar.rotate {
transform:rotate(-36000deg);
transition:2800s linear;
}
.col-small g.rotate {
transform:rotate(-36000deg);
transition:350s linear;
}
#wheel.rotate-1{
transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/
transition:140000s linear;
},
#planetar.rotate-1 {
transform:rotate(-36001deg);
transition:280000s linear;
}
.col-small g.rotate-1 {
transform:rotate(-36001deg);
transition:35000s linear;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<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 class="col-small">
<g>
<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>
<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 class="col-small" transform="rotate(240 100 100)">
<g>
<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 class="col-small" transform="rotate(120 100 100)">
<g>
<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 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>answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
edited 21 mins ago
answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
answered 2 hours ago
Temani AfifTemani Afif
75.2k94386
75.2k94386
Good answer, but 2 of the gears in your snippet do not rotate
– souzan
1 hour ago
@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome
– Temani Afif
1 hour ago
1
@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?
– Temani Afif
1 hour ago
1
@Alexandr_T oops, I removed more than the animation .. will fix it
– Temani Afif
1 hour ago
2
@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p
– Temani Afif
1 hour ago
|
show 8 more comments
Good answer, but 2 of the gears in your snippet do not rotate
– souzan
1 hour ago
@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome
– Temani Afif
1 hour ago
1
@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?
– Temani Afif
1 hour ago
1
@Alexandr_T oops, I removed more than the animation .. will fix it
– Temani Afif
1 hour ago
2
@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p
– Temani Afif
1 hour ago
Good answer, but 2 of the gears in your snippet do not rotate
– souzan
1 hour ago
Good answer, but 2 of the gears in your snippet do not rotate
– souzan
1 hour ago
@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome
– Temani Afif
1 hour ago
@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome
– Temani Afif
1 hour ago
1
1
@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?
– Temani Afif
1 hour ago
@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?
– Temani Afif
1 hour ago
1
1
@Alexandr_T oops, I removed more than the animation .. will fix it
– Temani Afif
1 hour ago
@Alexandr_T oops, I removed more than the animation .. will fix it
– Temani Afif
1 hour ago
2
2
@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p
– Temani Afif
1 hour ago
@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p
– Temani Afif
1 hour ago
|
show 8 more comments
2
Here is the simple code snipet i create to simulate the idea. All you need is
- Change SMIL style to CSS style (Don't use
animateTransform. Use csstransformpropertive). - Toggle
animation-play-statewhen click the button
const runBtn = document.getElementById('runBtn')
const pauseBtn = document.getElementById('pauseBtn')
const circle = document.getElementById('circle')
runBtn.addEventListener('click', () => {
if (!circle.classList.contains('running')) {
circle.classList.add('running')
}
})
pauseBtn.addEventListener('click', () => {
circle.classList.remove('running')
})body {
text-align: center;
}
#circle {
animation: rotate 3s linear infinite;
transform-origin: 200px 200px;
animation-play-state: paused;
}
#circle.running {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">
<g id="circle">
<circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>
<circle cx="200" cy="100" r="5" fill="yellow"/>
</g>
</svg><br>
<button id="runBtn">run</button>
<button id="pauseBtn">pause</button>answered 38 mins ago
DuannxDuannx
3,4331332
Try to transfer your decision to an example from my question. (+)
– Alexandr_T
30 mins ago
1
@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself
– Duannx
11 mins ago
Thanks for the example. This expanded my knowledge.I will find a way to thank you again
– Alexandr_T
7 mins ago
add a comment |
2
Here is the simple code snipet i create to simulate the idea. All you need is
- Change SMIL style to CSS style (Don't use
animateTransform. Use csstransformpropertive). - Toggle
animation-play-statewhen click the button
const runBtn = document.getElementById('runBtn')
const pauseBtn = document.getElementById('pauseBtn')
const circle = document.getElementById('circle')
runBtn.addEventListener('click', () => {
if (!circle.classList.contains('running')) {
circle.classList.add('running')
}
})
pauseBtn.addEventListener('click', () => {
circle.classList.remove('running')
})body {
text-align: center;
}
#circle {
animation: rotate 3s linear infinite;
transform-origin: 200px 200px;
animation-play-state: paused;
}
#circle.running {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">
<g id="circle">
<circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>
<circle cx="200" cy="100" r="5" fill="yellow"/>
</g>
</svg><br>
<button id="runBtn">run</button>
<button id="pauseBtn">pause</button>answered 38 mins ago
DuannxDuannx
3,4331332
Try to transfer your decision to an example from my question. (+)
– Alexandr_T
30 mins ago
1
@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself
– Duannx
11 mins ago
Thanks for the example. This expanded my knowledge.I will find a way to thank you again
– Alexandr_T
7 mins ago
add a comment |
2
2
2
Here is the simple code snipet i create to simulate the idea. All you need is
- Change SMIL style to CSS style (Don't use
animateTransform. Use csstransformpropertive). - Toggle
animation-play-statewhen click the button
const runBtn = document.getElementById('runBtn')
const pauseBtn = document.getElementById('pauseBtn')
const circle = document.getElementById('circle')
runBtn.addEventListener('click', () => {
if (!circle.classList.contains('running')) {
circle.classList.add('running')
}
})
pauseBtn.addEventListener('click', () => {
circle.classList.remove('running')
})body {
text-align: center;
}
#circle {
animation: rotate 3s linear infinite;
transform-origin: 200px 200px;
animation-play-state: paused;
}
#circle.running {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">
<g id="circle">
<circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>
<circle cx="200" cy="100" r="5" fill="yellow"/>
</g>
</svg><br>
<button id="runBtn">run</button>
<button id="pauseBtn">pause</button>answered 38 mins ago
DuannxDuannx
3,4331332
Here is the simple code snipet i create to simulate the idea. All you need is
- Change SMIL style to CSS style (Don't use
animateTransform. Use csstransformpropertive). - Toggle
animation-play-statewhen click the button
const runBtn = document.getElementById('runBtn')
const pauseBtn = document.getElementById('pauseBtn')
const circle = document.getElementById('circle')
runBtn.addEventListener('click', () => {
if (!circle.classList.contains('running')) {
circle.classList.add('running')
}
})
pauseBtn.addEventListener('click', () => {
circle.classList.remove('running')
})body {
text-align: center;
}
#circle {
animation: rotate 3s linear infinite;
transform-origin: 200px 200px;
animation-play-state: paused;
}
#circle.running {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">
<g id="circle">
<circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>
<circle cx="200" cy="100" r="5" fill="yellow"/>
</g>
</svg><br>
<button id="runBtn">run</button>
<button id="pauseBtn">pause</button>const runBtn = document.getElementById('runBtn')
const pauseBtn = document.getElementById('pauseBtn')
const circle = document.getElementById('circle')
runBtn.addEventListener('click', () => {
if (!circle.classList.contains('running')) {
circle.classList.add('running')
}
})
pauseBtn.addEventListener('click', () => {
circle.classList.remove('running')
})body {
text-align: center;
}
#circle {
animation: rotate 3s linear infinite;
transform-origin: 200px 200px;
animation-play-state: paused;
}
#circle.running {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">
<g id="circle">
<circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>
<circle cx="200" cy="100" r="5" fill="yellow"/>
</g>
</svg><br>
<button id="runBtn">run</button>
<button id="pauseBtn">pause</button>const runBtn = document.getElementById('runBtn')
const pauseBtn = document.getElementById('pauseBtn')
const circle = document.getElementById('circle')
runBtn.addEventListener('click', () => {
if (!circle.classList.contains('running')) {
circle.classList.add('running')
}
})
pauseBtn.addEventListener('click', () => {
circle.classList.remove('running')
})body {
text-align: center;
}
#circle {
animation: rotate 3s linear infinite;
transform-origin: 200px 200px;
animation-play-state: paused;
}
#circle.running {
animation-play-state: running;
}
@keyframes rotate {
0% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(360deg)
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">
<g id="circle">
<circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>
<circle cx="200" cy="100" r="5" fill="yellow"/>
</g>
</svg><br>
<button id="runBtn">run</button>
<button id="pauseBtn">pause</button>answered 38 mins ago
DuannxDuannx
3,4331332
answered 38 mins ago
DuannxDuannx
3,4331332
answered 38 mins ago
DuannxDuannx
3,4331332
answered 38 mins ago
DuannxDuannx
3,4331332
3,4331332
Try to transfer your decision to an example from my question. (+)
– Alexandr_T
30 mins ago
1
@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself
– Duannx
11 mins ago
Thanks for the example. This expanded my knowledge.I will find a way to thank you again
– Alexandr_T
7 mins ago
add a comment |
Try to transfer your decision to an example from my question. (+)
– Alexandr_T
30 mins ago
1
@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself
– Duannx
11 mins ago
Thanks for the example. This expanded my knowledge.I will find a way to thank you again
– Alexandr_T
7 mins ago
Try to transfer your decision to an example from my question. (+)
– Alexandr_T
30 mins ago
Try to transfer your decision to an example from my question. (+)
– Alexandr_T
30 mins ago
1
1
@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself
– Duannx
11 mins ago
@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself
– Duannx
11 mins ago
Thanks for the example. This expanded my knowledge.I will find a way to thank you again
– Alexandr_T
7 mins ago
Thanks for the example. This expanded my knowledge.I will find a way to thank you again
– Alexandr_T
7 mins ago
add a comment |
1
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>answered 4 hours ago
Kumar AmanKumar Aman
1315
3
Sorry, but the terms of the decision were: "How to make it so that when you click theStopbutton the image stops in the current state and the next time you press theGObutton, the animation does not start from the beginning, but from the locked state "
– Alexandr_T
3 hours ago
1
I have updated the snippet to fit the requirement
– Kumar Aman
24 mins ago
At first glance, everything is fine and I like it. I will study your decision
– Alexandr_T
15 mins ago
add a comment |
1
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>answered 4 hours ago
Kumar AmanKumar Aman
1315
3
Sorry, but the terms of the decision were: "How to make it so that when you click theStopbutton the image stops in the current state and the next time you press theGObutton, the animation does not start from the beginning, but from the locked state "
– Alexandr_T
3 hours ago
1
I have updated the snippet to fit the requirement
– Kumar Aman
24 mins ago
At first glance, everything is fine and I like it. I will study your decision
– Alexandr_T
15 mins ago
add a comment |
1
1
1
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>answered 4 hours ago
Kumar AmanKumar Aman
1315
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><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><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>answered 4 hours ago
Kumar AmanKumar Aman
1315
edited 26 mins ago
answered 4 hours ago
Kumar AmanKumar Aman
1315
answered 4 hours ago
Kumar AmanKumar Aman
1315
answered 4 hours ago
Kumar AmanKumar Aman
1315
1315
3
Sorry, but the terms of the decision were: "How to make it so that when you click theStopbutton the image stops in the current state and the next time you press theGObutton, the animation does not start from the beginning, but from the locked state "
– Alexandr_T
3 hours ago
1
I have updated the snippet to fit the requirement
– Kumar Aman
24 mins ago
At first glance, everything is fine and I like it. I will study your decision
– Alexandr_T
15 mins ago
add a comment |
3
Sorry, but the terms of the decision were: "How to make it so that when you click theStopbutton the image stops in the current state and the next time you press theGObutton, the animation does not start from the beginning, but from the locked state "
– Alexandr_T
3 hours ago
1
I have updated the snippet to fit the requirement
– Kumar Aman
24 mins ago
At first glance, everything is fine and I like it. I will study your decision
– Alexandr_T
15 mins ago
3
3
Sorry, but the terms of the decision were: "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 "– Alexandr_T
3 hours ago
Sorry, but the terms of the decision were: "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 "– Alexandr_T
3 hours ago
1
1
I have updated the snippet to fit the requirement
– Kumar Aman
24 mins ago
I have updated the snippet to fit the requirement
– Kumar Aman
24 mins ago
At first glance, everything is fine and I like it. I will study your decision
– Alexandr_T
15 mins ago
At first glance, everything is fine and I like it. I will study your decision
– Alexandr_T
15 mins ago
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54860601%2fhow-to-stop-the-animation-and-freeze-the-image-when-pressing-the-stop-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
You can find a CSS solution here But need to change animation from SMIL style to CSS style
– Duannx
3 hours ago
@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision
– Alexandr_T
3 hours ago
1
This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.
– enxaneta
2 hours ago
@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.
– Alexandr_T
2 hours ago