We Keep Coding

Restart SVG animation sequence from Javascript

I'm trying to restart SVG animation sequence from Javascript. Restart-button below will broke SVG animation sequence. How to restart/reset entire sequence?
document.getElementById("button").addEventListener("click", function() {
document.getElementById("fore").beginElement();
});
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150">
<path id="track" fill="none" stroke="#000000" stroke-width="1" stroke-dasharray="10,10" d="M 50 100 L 950 50"/>
<path id="plane" d="M-10 -10 L10 0L-10 10z" fill="red" />
<animateMotion xlink:href="#plane"
id="fore"
begin="0s;back.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto"
keyPoints="0;1"
keyTimes="0;1"
><mpath xlink:href="#track" /></animateMotion>
<animateMotion xlink:href="#plane"
id="back"
begin="fore.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto-reverse"
keyPoints="1;0"
keyTimes="0;1"
><mpath xlink:href="#track" /></animateMotion>
</svg>
<button id="button">RESTART</button>

You can use setCurrentTime on the entire svg element. I added an id of svgEl to the svg node and then when rest is clicked we do:
document.getElementById('svgEl').setCurrentTime(0);
Have a look at this:
document.getElementById("button").addEventListener("click", function() {
document.getElementById('svgEl').setCurrentTime(0);
});
<svg id="svgEl" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150">
<path id="track" fill="none" stroke="#000000" stroke-width="1" stroke-dasharray="10,10" d="M 50 100 L 950 50"/>
<path id="plane" d="M-10 -10 L10 0L-10 10z" fill="red" />
<animateMotion xlink:href="#plane"
id="fore"
begin="0s;back.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto"
keyPoints="0;1"
keyTimes="0;1"
restart="always"
><mpath xlink:href="#track" /></animateMotion>
<animateMotion xlink:href="#plane"
id="back"
begin="fore.end"
dur="2s"
fill="freeze"
repeatCount="1"
rotate="auto-reverse"
keyPoints="1;0"
keyTimes="0;1"
restart="always"
><mpath xlink:href="#track" /></animateMotion>
</svg>
<button id="button">RESTART</button>

Animation of cutting boards with a circular saw

I found a topic that implements an animation of the rotation and movement of the circular saw
html {
background-color: #337ab7;
}
.cutline {
stroke: #222;
stroke-width: .1%;
stroke-width: .5%;
stroke-dasharray: 1% 2%;
stroke-linecap: round;
fill: none;
}
.sawblade {
fill: #eee;
width: 200px;
height: auto;
margin: 30px;
}
<svg viewBox="0 0 3387 1270">
<path id="cutline" class="cutline" d="M 2700 1000 L 100 1000 " />
<g class="sawblade" >
<path id="sawblade" d="M779.9,413.8s15.26,-47.61,-89.24,-73.22c-1.24,-0.3,-2.45,-0.58,-3.65,-0.84c20.57,-19,50.83,-37.45,85.5,-28.49c0,0,2.29,-50,-105.27,-47.38c-1.2,0,-2.36,0.08,-3.51,0.13c14.95,-23.6,39.28,-49.18,74.95,-49.6c0,0,-10.8,-48.82,-114,-18.32l-1.63,0.49c8.62,-26.2,25.66,-55.9,59.27,-65.14c0,0,-22.88,-44.46,-114.87,11.33c-1.1,0.66,-2.15,1.32,-3.18,2c1.12,-28,9.45,-62.41,40.3,-80.6c0,0,-33.69,-36.94,-107.93,40.94c-0.82,0.87,-1.62,1.72,-2.39,2.57c-6.15,-27.25,-7,-62.55,18,-88.07c0,0,-42.16,-26.89,-93.55,67.63c-0.27,0.51,-0.53,1,-0.8,1.5c-12.43,-24.62,-21.38,-57.66,-4.15,-88c0,0,-47.61,-15.25,-73.22,89.24c-0.3,1.24,-0.58,2.46,-0.84,3.65c-19,-20.57,-37.45,-50.82,-28.49,-85.49c0,0,-50,-2.3,-47.38,105.26c0,1.2,0.08,2.37,0.13,3.52c-23.62,-14.93,-49.18,-39.29,-49.56,-75c0,0,-48.82,10.79,-18.32,114c0.16,0.55,0.32,1.09,0.49,1.62c-26.2,-8.61,-55.9,-25.66,-65.14,-59.27c0,0,-44.46,22.88,11.33,114.88q1,1.64,2,3.18c-28,-1.12,-62.42,-9.46,-80.6,-40.31c0,0,-36.94,33.7,40.94,107.93c0.86,0.83,1.72,1.62,2.57,2.4c-27.25,6.15,-62.55,7,-88.07,-18c0,0,-26.89,42.15,67.63,93.54l1.5,0.8c-24.62,12.44,-57.66,21.38,-88,4.15c0,0,-15.26,47.62,89.24,73.22c1.24,0.31,2.46,0.58,3.65,0.85c-20.57,19,-50.82,37.44,-85.49,28.49c0,0,-2.3,49.94,105.26,47.37c1.2,0,2.37,-0.07,3.52,-0.13c-14.93,23.63,-39.29,49.19,-75,49.57c0,0,10.79,48.82,114,18.32l1.62,-0.5c-8.61,26.21,-25.66,55.9,-59.27,65.14c0,0,22.88,44.46,114.88,-11.32c1.09,-0.67,2.15,-1.33,3.18,-2c-1.12,28,-9.46,62.42,-40.31,80.6c0,0,33.7,36.94,107.93,-40.93c0.83,-0.87,1.62,-1.73,2.4,-2.58c6.15,27.26,7,62.56,-18,88.07c0,0,42.15,26.89,93.54,-67.63c0.28,-0.51,0.54,-1,0.8,-1.5c12.44,24.62,21.38,57.67,4.15,88c0,0,47.62,15.26,73.22,-89.24c0.31,-1.24,0.58,-2.45,0.85,-3.65c19,20.57,37.44,50.83,28.49,85.5c0,0,49.94,2.29,47.37,-105.27c0,-1.2,-0.07,-2.36,-0.13,-3.51c23.63,14.92,49.18,39.28,49.57,75c0,0,48.82,-10.8,18.32,-114c-0.16,-0.55,-0.33,-1.09,-0.5,-1.63c26.21,8.62,55.9,25.66,65.14,59.27c0,0,44.46,-22.88,-11.32,-114.87c-0.67,-1.1,-1.33,-2.15,-2,-3.18c28,1.12,62.42,9.46,80.6,40.31c0,0,36.94,-33.7,-40.93,-107.94c-0.87,-0.82,-1.73,-1.62,-2.58,-2.39c27.26,-6.15,62.56,-7,88.07,18c0,0,26.89,-42.16,-67.63,-93.55l-1.5,-0.8c24.69,-12.4,57.74,-21.35,88.04,-4.12zm-442.7,-23.46a53.14,53.14,0,1,1,53.14,53.14a53.15,53.15,0,0,1,-53.14,-53.14z" >
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="360 390.35 390.35; 0 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#cutline" />
</animateMotion>
</path>
</g>
</svg>
In this matter, the problem of simultaneous double animation was solved: rotation and movement of a circular saw.
There was an idea to apply this solution on a realistic example, for example cutting a board
But it turned out to be not so simple.
Either the board obscured the saw, or the saw was in the foreground, blocking the board.
It is necessary that the saw cut into the board, the cut line was visible, and after passing the saw, two halves of the board would be obtained.
I tried all sorts of solutions using clip-path, mask, etc., to hide unnecessary parts of the image.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1">
<defs>
<mask id="msk1" >
<rect width="100%" height="100%" fill="white" />
<circle cx="390" cy="390" r="390" fill="red" />
</mask>
</defs>
<g id="sawblade" transform="translate(1000,126)">
<path d="m779.9 413.8c0 0 15.3-47.6-89.2-73.2-1.2-0.3-2.4-0.6-3.6-0.8 20.6-19 50.8-37.4 85.5-28.5 0 0 2.3-50-105.3-47.4-1.2 0-2.4 0.1-3.5 0.1 15-23.6 39.3-49.2 75-49.6 0 0-10.8-48.8-114-18.3l-1.6 0.5c8.6-26.2 25.7-55.9 59.3-65.1 0 0-22.9-44.5-114.9 11.3-1.1 0.7-2.1 1.3-3.2 2 1.1-28 9.5-62.4 40.3-80.6 0 0-33.7-36.9-107.9 40.9-0.8 0.9-1.6 1.7-2.4 2.6-6.1-27.2-7-62.5 18-88.1 0 0-42.2-26.9-93.5 67.6-0.3 0.5-0.5 1-0.8 1.5-12.4-24.6-21.4-57.7-4.1-88 0 0-47.6-15.2-73.2 89.2-0.3 1.2-0.6 2.5-0.8 3.7-19-20.6-37.4-50.8-28.5-85.5 0 0-50-2.3-47.4 105.3 0 1.2 0.1 2.4 0.1 3.5-23.6-14.9-49.2-39.3-49.6-75 0 0-48.8 10.8-18.3 114 0.2 0.6 0.3 1.1 0.5 1.6-26.2-8.6-55.9-25.7-65.1-59.3 0 0-44.5 22.9 11.3 114.9q1 1.6 2 3.2c-28-1.1-62.4-9.5-80.6-40.3 0 0-36.9 33.7 40.9 107.9 0.9 0.8 1.7 1.6 2.6 2.4-27.2 6.2-62.5 7-88.1-18 0 0-26.9 42.2 67.6 93.5l1.5 0.8c-24.6 12.4-57.7 21.4-88 4.2 0 0-15.3 47.6 89.2 73.2 1.2 0.3 2.5 0.6 3.7 0.9-20.6 19-50.8 37.4-85.5 28.5 0 0-2.3 49.9 105.3 47.4 1.2 0 2.4-0.1 3.5-0.1-14.9 23.6-39.3 49.2-75 49.6 0 0 10.8 48.8 114 18.3l1.6-0.5c-8.6 26.2-25.7 55.9-59.3 65.1 0 0 22.9 44.5 114.9-11.3 1.1-0.7 2.2-1.3 3.2-2-1.1 28-9.5 62.4-40.3 80.6 0 0 33.7 36.9 107.9-40.9 0.8-0.9 1.6-1.7 2.4-2.6 6.2 27.3 7 62.6-18 88.1 0 0 42.2 26.9 93.5-67.6 0.3-0.5 0.5-1 0.8-1.5 12.4 24.6 21.4 57.7 4.2 88 0 0 47.6 15.3 73.2-89.2 0.3-1.2 0.6-2.4 0.9-3.6 19 20.6 37.4 50.8 28.5 85.5 0 0 49.9 2.3 47.4-105.3 0-1.2-0.1-2.4-0.1-3.5 23.6 14.9 49.2 39.3 49.6 75 0 0 48.8-10.8 18.3-114-0.2-0.5-0.3-1.1-0.5-1.6 26.2 8.6 55.9 25.7 65.1 59.3 0 0 44.5-22.9-11.3-114.9-0.7-1.1-1.3-2.1-2-3.2 28 1.1 62.4 9.5 80.6 40.3 0 0 36.9-33.7-40.9-107.9-0.9-0.8-1.7-1.6-2.6-2.4 27.3-6.1 62.6-7 88.1 18 0 0 26.9-42.2-67.6-93.5l-1.5-0.8c24.7-12.4 57.7-21.3 88-4.1zM337.2 390.3a53.1 53.1 0 1 1 53.1 53.1 53.2 53.2 0 0 1-53.1-53.1z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="5s" repeatCount="indefinite"></animateTransform>
</path>
</g>
<g mask="url(#msk1)">
<path d="M514.5 288.7H3267.7L3035.1 698.6H281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"/>
<path d="m3267.7 288.7 3.3 67.7-236 404.4H281.6v-62.1h2753.5z" style="fill:#e4c000;stroke-width:2;stroke:#000"/>
<path d="m3035.1 698.6 0 62.1" style="fill:none;stroke:#000"/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"></animateTransform>
</g>
</svg>
How to get a solution so that when cutting the board, the saw is in the body of the board

It is necessary to encode two halves of the board and place one in front of the saw, and place the second half of the board behind the saw. Thus, it turns out that the saw crashes into the board.
When moving the saw, a cut line stretches behind it, which is realized by an animation of increasing the line
<line x1="820" y1="580" x2="820" y2="580" stroke="black" stroke-width="16" >
<!-- Cut line animation -->
<animate id="cut_line" attributeName="x2" begin="svg1.click" dur="10s" values="828;3550" />
Thanks to #enxaneta for the idea of using different types of animation animateTransform and animateMotion
since two animations of animateTransform applied to the same object do not work
<!-- Saw rotation animation -->
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
values="0 390.35 390.35; 360 390.35 390.35"
dur="2.5s"
begin="svg1.click"
repeatCount="indefinite"
additive="sum" />
<!-- Saw Movement Animation -->
<animateMotion
dur="15s"
begin="svg1.click"
repeatCount="1"
fill="freeze">
<mpath xlink:href="#cut" />
</animateMotion>
Please consider comments in the code
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1">
<!-- Half of the board in the background located behind the saw -->
<g id="g906" transform="translate(400,126)">
<path id="path846"
d="M 514.46257,288.68093 H 3267.7437 l -111.1614,192.53728 -2748.7345,0 z"
style="fill:#e4c000;stroke:black;stroke-width:4" />
<path id="path900"
d="M 403.30112,481.21821 H 3156.5823 l 111.1614,-192.53728 3.3199,85.72051 -106.2504,184.03106 -2756.9654,0.25024 z"
style="fill:#e4c000;stroke:#000000;stroke-width:4;" />
<!-- Board fall animation after cutting -->
<animateTransform id="an_fell2"
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 0 350"
begin="an_fell.begin + 0.8s "
dur="1s"
repeatCount="1"
fill="freeze"
additive="sum" />
</g>
<g transform="translate(50,126)"
id="g4">
<path
id="sawblade"
d="m 779.9,413.8 c 0,0 15.26,-47.61 -89.24,-73.22 -1.24,-0.3 -2.45,-0.58 -3.65,-0.84 20.57,-19 50.83,-37.45 85.5,-28.49 0,0 2.29,-50 -105.27,-47.38 -1.2,0 -2.36,0.08 -3.51,0.13 14.95,-23.6 39.28,-49.18 74.95,-49.6 0,0 -10.8,-48.82 -114,-18.32 l -1.63,0.49 c 8.62,-26.2 25.66,-55.9 59.27,-65.14 0,0 -22.88,-44.46 -114.87,11.33 -1.1,0.66 -2.15,1.32 -3.18,2 1.12,-28 9.45,-62.41 40.3,-80.6 0,0 -33.69,-36.94 -107.93,40.94 -0.82,0.87 -1.62,1.72 -2.39,2.57 -6.15,-27.25 -7,-62.55 18,-88.07 0,0 -42.16,-26.89 -93.55,67.63 -0.27,0.51 -0.53,1 -0.8,1.5 -12.43,-24.62 -21.38,-57.66 -4.15,-88 0,0 -47.61,-15.25 -73.22,89.24 -0.3,1.24 -0.58,2.46 -0.84,3.65 -19,-20.57 -37.45,-50.82 -28.49,-85.49 0,0 -50,-2.3 -47.38,105.26 0,1.2 0.08,2.37 0.13,3.52 -23.62,-14.93 -49.18,-39.29 -49.56,-75 0,0 -48.82,10.79 -18.32,114 0.16,0.55 0.32,1.09 0.49,1.62 -26.2,-8.61 -55.9,-25.66 -65.14,-59.27 0,0 -44.46,22.88 11.33,114.88 q 1,1.64 2,3.18 c -28,-1.12 -62.42,-9.46 -80.6,-40.31 0,0 -36.94,33.7 40.94,107.93 0.86,0.83 1.72,1.62 2.57,2.4 -27.25,6.15 -62.55,7 -88.07,-18 0,0 -26.89,42.15 67.63,93.54 l 1.5,0.8 c -24.62,12.44 -57.66,21.38 -88,4.15 0,0 -15.26,47.62 89.24,73.22 1.24,0.31 2.46,0.58 3.65,0.85 -20.57,19 -50.82,37.44 -85.49,28.49 0,0 -2.3,49.94 105.26,47.37 1.2,0 2.37,-0.07 3.52,-0.13 -14.93,23.63 -39.29,49.19 -75,49.57 0,0 10.79,48.82 114,18.32 l 1.62,-0.5 c -8.61,26.21 -25.66,55.9 -59.27,65.14 0,0 22.88,44.46 114.88,-11.32 1.09,-0.67 2.15,-1.33 3.18,-2 -1.12,28 -9.46,62.42 -40.31,80.6 0,0 33.7,36.94 107.93,-40.93 0.83,-0.87 1.62,-1.73 2.4,-2.58 6.15,27.26 7,62.56 -18,88.07 0,0 42.15,26.89 93.54,-67.63 0.28,-0.51 0.54,-1 0.8,-1.5 12.44,24.62 21.38,57.67 4.15,88 0,0 47.62,15.26 73.22,-89.24 0.31,-1.24 0.58,-2.45 0.85,-3.65 19,20.57 37.44,50.83 28.49,85.5 0,0 49.94,2.29 47.37,-105.27 0,-1.2 -0.07,-2.36 -0.13,-3.51 23.63,14.92 49.18,39.28 49.57,75 0,0 48.82,-10.8 18.32,-114 -0.16,-0.55 -0.33,-1.09 -0.5,-1.63 26.21,8.62 55.9,25.66 65.14,59.27 0,0 44.46,-22.88 -11.32,-114.87 -0.67,-1.1 -1.33,-2.15 -2,-3.18 28,1.12 62.42,9.46 80.6,40.31 0,0 36.94,-33.7 -40.93,-107.94 -0.87,-0.82 -1.73,-1.62 -2.58,-2.39 27.26,-6.15 62.56,-7 88.07,18 0,0 26.89,-42.16 -67.63,-93.55 l -1.5,-0.8 c 24.69,-12.4 57.74,-21.35 88.04,-4.12 z M 337.2,390.34 a 53.14,53.14 0 1 1 53.14,53.14 53.15,53.15 0 0 1 -53.14,-53.14 z">
<!-- Saw rotation animation -->
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
values="0 390.35 390.35; 360 390.35 390.35"
dur="2.5s"
begin="svg1.click"
repeatCount="indefinite"
additive="sum" />
<!-- Saw Movement Animation -->
<animateMotion
dur="15s"
begin="svg1.click"
repeatCount="1"
fill="freeze">
<mpath xlink:href="#cut" />
</animateMotion>
</path>
</g>
<!-- Half of the board in the foreground located before the saw -->
<g id="g907" transform="translate(303,300)">
<path id="path846"
d="M 514.46257,288.68093 H 3267.7437 l -111.1614,192.53728 -2748.7345,0 z"
style="fill:#e4c000;stroke:black;stroke-width:4;" />
<path id="path900"
d="M 403.30112,481.21821 H 3156.5823 l 111.1614,-192.53728 3.3199,85.72051 -106.2504,184.03106 -2756.9654,0.25024 z"
style="fill:#e4c000;stroke:#000000;stroke-width:4;" />
<!-- Board fall animation after cutting -->
<animateTransform id="an_fell"
attributeType="xml"
attributeName="transform"
type="translate"
values="0 0; 120 400"
begin="cut_line.end"
dur="1s"
repeatCount="1"
fill="freeze"
additive="sum" />
</g>
<!-- Mask line cuting -->
<path id="path914" transform="translate(410,108)"
style="fill:none;stroke:#E4C000;stroke-width:12px;"
d="M 403.30112,481.21821 H 3156.5823" >
<animate id="opacity_line2" attributeName="stroke-opacity" begin="an_fell.begin" dur="0.1s" values="1;0" fill="freeze" />
</path>
<path id="cut" fill="red" d="M10 126 L3500 126"/>
<line x1="820" y1="580" x2="820" y2="580" stroke="black" stroke-width="12" >
<!-- Board cut animation -->
<animate id="cut_line" attributeName="x2" begin="svg1.click" dur="15s" values="828;3550" />
<!-- Masking of the line animation of the cutting -->
<animate id="opacity_line" attributeName="stroke-opacity" begin="an_fell.begin" dur="0.1s" values="1;0" fill="freeze" />
</line>
</svg>

Quick example
You need to have 3 layers. As SVG gives no support for depth apart from element order (or maybe a filter can create a z buffer) you need the elements in the correct order.
I don't have a SVG authoring tool on hand so used some code to slice the plank. The plank is duplicated, one behind and one in front of the saw. As a used code you will find some additional element ids in the example I forgot to remove. They are not needed.
To hide the cut to the left of the blade you need to cover the cut. I did this using a clip-path for the left and right sides. To avoid holes between clip paths you need to overlap them by at least a pixel.
Example
The right cut plank is a little thicker than it should be (my bad) but then this is how to solve the problem, not the complete end product.
I also removed the mask, you will have to add that as well (one for the top and one for the bottom.
As stackOverflow does not count SVG as an image i can not insert the example without putting it in a snippet.
<svg id="SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3387 1270" version="1.1">
<defs>
<clipPath id="clipLeft">
<rect x="-100" y="0" width="1102" height="100%"/>
</clipPath>
<clipPath id="clipRight">
<rect x="1000" y="0" width="2100" height="100%"/>
</clipPath>
</defs>
<!-- RIGHT SIDE of ANIMATION -->
<g clip-path="url(#clipRight)">
<!-- BACK of ANIMATION -->
<g transform="translate(1700 0)">
<path id="boardTop" d="M 514.5 288.1 H 3267.7 L 3151.4 493.4 H 398.2Z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path>
<path id="boardTopEdge" d="M 3267.7 288.1 L 3267.7 355.8 L 3151.4 561.1 L 3151.4 493.4z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path>
<path id="boardTopEdge3" d="M 3151.4 493.4 L 3151.4 561.1 L 398.2 561.1 L 398.2 493.4z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path>
<path id="boardTopEdge1" d="M 3267.7 288.1 L 3267.7 355.8 L 3151.4 561.1 L 3151.4 493.4z" style="fill:none;stroke:#000"></path>
<path id="boardTopEdge2" d="M 3151.4 493.4 L 3151.4 561.1 L 398.2 561.1 L 398.2 493.4z" style="fill:none;stroke:#000"></path>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze">
</animateTransform>
</g>
<g id="sawblade" transform="translate(1000,126)">
<path d="m779.9 413.8c0 0 15.3-47.6-89.2-73.2-1.2-0.3-2.4-0.6-3.6-0.8 20.6-19 50.8-37.4 85.5-28.5 0 0 2.3-50-105.3-47.4-1.2 0-2.4 0.1-3.5 0.1 15-23.6 39.3-49.2 75-49.6 0 0-10.8-48.8-114-18.3l-1.6 0.5c8.6-26.2 25.7-55.9 59.3-65.1 0 0-22.9-44.5-114.9 11.3-1.1 0.7-2.1 1.3-3.2 2 1.1-28 9.5-62.4 40.3-80.6 0 0-33.7-36.9-107.9 40.9-0.8 0.9-1.6 1.7-2.4 2.6-6.1-27.2-7-62.5 18-88.1 0 0-42.2-26.9-93.5 67.6-0.3 0.5-0.5 1-0.8 1.5-12.4-24.6-21.4-57.7-4.1-88 0 0-47.6-15.2-73.2 89.2-0.3 1.2-0.6 2.5-0.8 3.7-19-20.6-37.4-50.8-28.5-85.5 0 0-50-2.3-47.4 105.3 0 1.2 0.1 2.4 0.1 3.5-23.6-14.9-49.2-39.3-49.6-75 0 0-48.8 10.8-18.3 114 0.2 0.6 0.3 1.1 0.5 1.6-26.2-8.6-55.9-25.7-65.1-59.3 0 0-44.5 22.9 11.3 114.9q1 1.6 2 3.2c-28-1.1-62.4-9.5-80.6-40.3 0 0-36.9 33.7 40.9 107.9 0.9 0.8 1.7 1.6 2.6 2.4-27.2 6.2-62.5 7-88.1-18 0 0-26.9 42.2 67.6 93.5l1.5 0.8c-24.6 12.4-57.7 21.4-88 4.2 0 0-15.3 47.6 89.2 73.2 1.2 0.3 2.5 0.6 3.7 0.9-20.6 19-50.8 37.4-85.5 28.5 0 0-2.3 49.9 105.3 47.4 1.2 0 2.4-0.1 3.5-0.1-14.9 23.6-39.3 49.2-75 49.6 0 0 10.8 48.8 114 18.3l1.6-0.5c-8.6 26.2-25.7 55.9-59.3 65.1 0 0 22.9 44.5 114.9-11.3 1.1-0.7 2.2-1.3 3.2-2-1.1 28-9.5 62.4-40.3 80.6 0 0 33.7 36.9 107.9-40.9 0.8-0.9 1.6-1.7 2.4-2.6 6.2 27.3 7 62.6-18 88.1 0 0 42.2 26.9 93.5-67.6 0.3-0.5 0.5-1 0.8-1.5 12.4 24.6 21.4 57.7 4.2 88 0 0 47.6 15.3 73.2-89.2 0.3-1.2 0.6-2.4 0.9-3.6 19 20.6 37.4 50.8 28.5 85.5 0 0 49.9 2.3 47.4-105.3 0-1.2-0.1-2.4-0.1-3.5 23.6 14.9 49.2 39.3 49.6 75 0 0 48.8-10.8 18.3-114-0.2-0.5-0.3-1.1-0.5-1.6 26.2 8.6 55.9 25.7 65.1 59.3 0 0 44.5-22.9-11.3-114.9-0.7-1.1-1.3-2.1-2-3.2 28 1.1 62.4 9.5 80.6 40.3 0 0 36.9-33.7-40.9-107.9-0.9-0.8-1.7-1.6-2.6-2.4 27.3-6.1 62.6-7 88.1 18 0 0 26.9-42.2-67.6-93.5l-1.5-0.8c24.7-12.4 57.7-21.3 88-4.1zM337.2 390.3a53.1 53.1 0 1 1 53.1 53.1 53.2 53.2 0 0 1-53.1-53.1z" transform="rotate(303.501 390.35 390.35)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" values="0 390.35 390.35; 360 390.35 390.35" dur="2.5s" repeatCount="indefinite"></animateTransform>
</path>
</g>
<!-- FRONT of ANIMATION -->
<g transform="translate(1700 0)">
<path id="boardBotEdge" d="M 3128.1 534.4 L 3128.1 602.1 L 3035.1 766.3 L 3035.1 698.6z" style="fill:#e4c000;stroke-width:2;stroke:#000"></path>
<path id="boardBot" d="M 374.9 534.4 H 3128.1 L 3035.1 698.6 H 281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path>
<path id="boardBotEdge3" d="M 3035.1 698.6 L 3035.1 766.3 L 281.6 766.3 L 281.6 698.6z" style="fill:#e4c000;stroke-width:2;stroke:#500"></path>
<path id="boardBotEdge1" d="M 3128.1 534.4 L 3128.1 602.1 L 3035.1 766.3 L 3035.1 698.6z" style="fill:none;stroke:#000"></path>
<path id="boardBotEdge2" d="M 3035.1 698.6 L 3035.1 766.3 L 281.6 766.3 L 281.6 698.6z" style="fill:none;stroke:#000"></path>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze">
</animateTransform>
</g>
<g>
<rect width="0" height="200" y="450" x="800" style="fill:#e4c000;">
<animate attributeName="width" values="1750;0" dur="3s" repeatCount="1"></animate>
<animate attributeName="x" values="-850;800" dur="3s" repeatCount="1"></animate>
</rect>
</g>
</g>
<!-- LEFT SIDE of ANIMATION -->
<g clip-path="url(#clipLeft)">
<g>
<path d="M514.5 288.7H3267.7L3035.1 698.6H281.6Z" style="fill:#e4c000;stroke-width:2;stroke:#500"/>
<path d="m3267.7 288.7 3.3 67.7-236 404.4H281.6v-62.1h2753.5z" style="fill:#e4c000;stroke-width:2;stroke:#000"/>
<path d="m3035.1 698.6 0 62.1" style="fill:none;stroke:#000"/>
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="-1600, 0;1700, 0" dur="5s" repeatCount="1" fill="freeze"></animateTransform>
</g>
</g>
</svg>

How to combine two animateTransformation not silmutaneously but consecutively?

I have the following transformations
<svg height="205" width="365" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g>
<title></title>
<rect fill="none" height="207" id="canvas_background" width="367" x="-1" y="-1"></rect> </g> <g>
<title></title>
<g id="svg_3"> <path class="hinh1" d="m22,88.5a67.5,67.5 0 0 1 135,0l-135,0z" fill="none" id="svg_1" stroke="#000" stroke-width="1.5" style="fill: rgb(92, 188, 214);stroke-linejoin: round;/* x: 100; *//* y: 100px; */"></path> <g transform="translate(-132.281 0)"><path class="hinh2" d="m207.0027,88.5a67.5,67.5 0 0 1 135,0l-135,0z" fill="none" id="svg_2" stroke="#000" stroke-width="1.5" transform="rotate(180 274.503 54.7665) translate(0 70.8138) translate(0 -82.7702)" style="fill: rgb(214, 92, 188); stroke-linejoin: round;">
</path>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 56" begin="0s" dur="5s" repeatCount="indefinite" id="one">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="-185 0" begin="one.end" dur="5s" repeatCount="indefinite">
</animateTransform>
</g> </g> </g> </svg>
I want the right semicircle to go down THEN go left (not simultaneously) to snap to the left semicircle.
I found that, the following code does not work as I expect, only the second one is triggered. Isn't it the case that one.end has no meaning here?
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 56" begin="0s" dur="5s" repeatCount="indefinite" id="one">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="-185 0" begin="one.end" dur="5s" repeatCount="indefinite">
</animateTransform>
In addition, at the end of the animations, I want the right to stop for about 3s before repeating, how to do so?

Instead of using the to and for attributes you can animate between several values by using the values attribute where the values for the transformation are separates by semicolons:
<svg height="205" width="365" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="none" height="207" id="canvas_background" width="367" x="-1" y="-1"></rect>
</g>
<g id="svg_3">
<path class="hinh1" d="m22,88.5a67.5,67.5 0 0 1 135,0l-135,0z" fill="none" id="svg_1" stroke="#000" stroke-width="1.5" style="fill: rgb(92, 188, 214);stroke-linejoin: round;"></path>
<g>
<path class="hinh2" d="m207.0027,88.5a67.5,67.5 0 0 1 135,0l-135,0z" fill="none" id="svg_2" stroke="#000" stroke-width="1.5" transform="rotate(180 274.503 54.7665) translate(0 70.8138) translate(0 -82.7702)" style="fill: rgb(214, 92, 188); stroke-linejoin: round;">
</path>
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;0 56;-185,56" begin="0s" dur="5s" repeatCount="1" fill="freeze" id="one">
</animateTransform>
</g>
</g>
</svg>

Trying to animate SVG gradient

I am using SVG to try and animate a gradient path - to create a tail / shooting star effect. In doing this, I want to animate an object at the front of the tail, which I have shown in my example below (the circles).
The example works barely in Google Chrome, haven't checked others... You can see I've got 5 circles/paths and only 1 of them is working properly. The curved one animates the gradient at a different speed to the object and the others don't work properly at all except for the "almost-horizontal" one.
Can someone please provide some insight into why this doesn't work, recommend a way I could do this and provide an example if possible?
I'm almost to the point where i'll just write my own render code in canvas and using a JS library... :(
<svg style="height: 400px; width: 100%" viewBox="0 0 500 200">
<path id="circlePath1" stroke-width="2" d="M10 100 Q 100 10, 150 80 T 300 100" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath2" stroke-width="2" d="M30 20 L 130 19" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath3" stroke-width="2" d="M30 10 L 130 10" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath4" stroke-width="2" d="M10 10 L 10 110" stroke="url(#grad)" fill="transparent"></path>
<path id="circlePath5" stroke-width="2" d="M10 20 L 20 110" stroke="url(#grad)" fill="transparent"></path>
<linearGradient id='grad'>
<stop stop-opacity="0" stop-color='#800'>
<animate attributeName="offset" dur="2s" values='-0.20;0.80' repeatCount="indefinite" ></animate>
</stop>
<stop stop-color='#800' stop-opacity=".5">
<animate attributeName="offset" dur="2s" values='-0.02;0.98' repeatCount="indefinite" ></animate>
</stop>
<stop stop-opacity="0.5" stop-color='#800'>
<animate attributeName="offset" dur="2s" values='-0;1' repeatCount="indefinite" ></animate>
</stop>
<stop stop-opacity="0" stop-color='#800'>
<animate attributeName="offset" dur="2s" values='-0;1' repeatCount="indefinite" ></animate>
</stop>
</linearGradient>
<circle id="c1" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath1"></mpath>
</animateMotion>
</circle>
<circle id="c2" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath2"></mpath>
</animateMotion>
</circle>
<circle id="c3" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath3"></mpath>
</animateMotion>
</circle>
<circle id="c4" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath4"></mpath>
</animateMotion>
</circle>
<circle id="c5" r="2.5" cx="" cy="" fill="#880000">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#circlePath5"></mpath>
</animateMotion>
</circle>
</svg>

In this attempt I use a radial gradient that is masked by the line to create the trail, then a separate dot.
<svg width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="motion-path" stroke-width="2" d="M202.4 58.3c-13.8.1-33.3.4-44.8 9.2-14 10.7-26.2 29.2-31.9 45.6-7.8 22.2-13.5 48-3.5 70.2 12.8 28.2 47.1 43.6 68.8 63.6 19.6 18.1 43.4 26.1 69.5 29.4 21.7 2.7 43.6 3.3 65.4 4.7 19.4 1.3 33.9-7.7 51.2-15.3 24.4-10.7 38.2-44 40.9-68.9 1.8-16.7 3.4-34.9-10.3-46.5-9.5-8-22.6-8.1-33.2-14.1-13.7-7.7-27.4-17.2-39.7-26.8-5.4-4.2-10.4-8.8-15.8-12.9-4.5-3.5-8.1-8.3-13.2-11-6.2-3.3-14.3-5.4-20.9-8.2-5-2.1-9.5-5.2-14.3-7.6-6.5-3.3-12.1-7.4-19.3-8.9-6-1.2-12.4-1.3-18.6-1.5-10.2-.3-20.2-1.5-30.3-1" stroke="#666" fill="none"/>
<mask id="path-mask">
<use xlink:href="#motion-path" stroke="#666"/>
</mask>
<symbol id="ball">
<circle id="ball" r="2.5" fill="#800">
<animateMotion dur="5s" repeatCount="indefinite">
<mpath xlink:href="#motion-path"/>
</animateMotion>
</circle>
</symbol>
<symbol id="trail">
<circle r="30" fill="url(#grad)">
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
<mpath xlink:href="#motion-path"/>
</animateMotion>
</circle>
</symbol>
<linearGradient id="grad">
<stop offset="0" stop-opacity="0" stop-color="#800"/>
<stop offset=".5" stop-opacity=".8" stop-color="#800"/>
<stop offset=".5" stop-opacity="0" stop-color="#800"/>
</linearGradient>
</defs>
<use xlink:href="#ball"/>
<use xlink:href="#trail" mask="url(#path-mask)"/>
</svg>
It has its limitations (if the path gets too close you get the trail showing on both bits) but hopefully this gives you an idea to play with.

svg animationTransform from dynamic value

There is a circle. When you mouseover it increases from 1 to 2 when mouseout is reduced from 2 to 1.
With the rapid run the mouse over the visible circle of the race to widen the circle. The problem is that the animation start the circle from the values on which he managed will increase, and with the value 2. How to make so that when you mouseout the animation of reduction began with the value that had increased range.
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c1">
<ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
<text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>
</g>
<defs>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c1"
attributeName="transform"
type="scale"
dur="500ms"
from="1"
to="2"
restart="whenNotActive"
begin="mouseover"
fill="freeze"
id="c-hover"
/>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c1"
attributeName="transform"
type="scale"
dur="500ms"
from="2"
to="1"
restart="whenNotActive"
begin="mouseout"
fill="freeze"
id="c-out"
/>

Simply delete the attribute from="2" from the second animateTransform element.
Because you are no longer providing a starting value for the mouseout animation, this has the effect of making this animation start at whatever value it has at the moment it is started, i.e. at the moment the mouse moves of the element. For example, if the user starts the initial mouseover animation by mousing over the element but then moves the mouse out when the scale has only reached 1.76, then the mouseout animation scaling will start at its current value, i.e. 1.76, not 2, and return to 1.
(To make the code you provided work in the code snippets below (at least in Firefox), I placed the minimal extra code required around your code to get it to work: i.e. I put <svg height="300"> at the top and </svg> at the bottom.)
Original problematic code with working snippet (essentially copied from your question):
<svg height="300">
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c1">
<ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
<text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>
</g>
<defs>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c1"
attributeName="transform"
type="scale"
dur="500ms"
from="1"
to="2"
restart="whenNotActive"
begin="mouseover"
fill="freeze"
id="c-hover"
/>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c1"
attributeName="transform"
type="scale"
dur="500ms"
from="2"
to="1"
restart="whenNotActive"
begin="mouseout"
fill="freeze"
id="c-out"
/>
</svg>
Revised "fixed" code with working snippet:
<svg height="300">
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c1">
<ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
<text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>
</g>
<defs>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c1"
attributeName="transform"
type="scale"
dur="500ms"
from="1"
to="2"
restart="whenNotActive"
begin="mouseover"
fill="freeze"
id="c-hover"
/>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c1"
attributeName="transform"
type="scale"
dur="500ms"
to="1"
restart="whenNotActive"
begin="mouseout"
fill="freeze"
id="c-out"
/>
</svg>