Animate SVG circle from small to large and back to small - svg

Without using css and js, I would like to animate this svg. I would like for the circles to go from small to large and then back to small. I've gotten the animation to work for small to large but now I can't seem to figure out how to get them to return to their original size.
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="8" r="1" style="fill:steelblue;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin=".25s" repeatCount="indefinite" />
</circle>
<circle cx="18" cy="8" r="1" style="fill:red;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin=".5s" repeatCount="indefinite" />
</circle>
<circle cx="30" cy="8" r="1" style="fill:orange;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin=".75s" repeatCount="indefinite" />
</circle>
<circle cx="42" cy="8" r="1" style="fill:green;">
<animate attributeType="XML" attributeName="r" from="1" to="6"
dur="1s" begin="1s" repeatCount="indefinite" />
</circle>
</svg>
Focusing on the 1st circle, I'd like to go from r="1" to r="6" and then back to r="1". This should happen within dur="1s".
Is this possible? If so how? Again, without using external JS or CSS.
Thanks!


Instead of from and to, use values to list a series of values that it should animate between.
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="6" cy="8" r="1" style="fill:steelblue;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="0.25s" repeatCount="indefinite" />
</circle>
<circle cx="18" cy="8" r="1" style="fill:red;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="0.5s" repeatCount="indefinite" />
</circle>
<circle cx="30" cy="8" r="1" style="fill:orange;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="0.75s" repeatCount="indefinite" />
</circle>
<circle cx="42" cy="8" r="1" style="fill:green;">
<animate attributeType="XML" attributeName="r" values="1;6;1"
dur="1s" begin="1s" repeatCount="indefinite" />
</circle>
</svg>

Related

SVG animateTransform toggle only working once

If you click two subsequent times on the rectangle, you see an animation toggling on and off:
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
<rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
<animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
<set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
</rect>
<rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
<animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
<set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
</rect>
<text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
<tspan>Upper Title</tspan>
<tspan class="project-name-span" x="17" dy="15">lower title</tspan>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
</text>
</svg>
I want that to work as many times as you may want, but it only works once; afterwards the rotation start point for the first click is for some reason shifted by -90 deg, as you'll notice from upon the 3rd click. Any ideas?
UPDATE
I noticed the following, if that may help to solve the problem (still unable to solve it): Try out the following with the snippet above:
A) Click on the rectangle once
B) Click on the rectangle again, to get the label back to its original position
C) Before clicking on the rectangle for the third time, copy the four animateTransform tags inside the text tag into a js variable let's say yourSavedAnimateTransformString, then delete them from the markup, e.g. via
document.getElementsByClassName("timeline-project-label")[0].innerHTML =
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[0].outerHTML +
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[1].outerHTML;
, then reinsert them at the exact same place with js, e.g. via
document.getElementsByClassName("timeline-project-label")[0].innerHTML +=
yourSavedAnimateTransformString
Then, click on the rectangle a third and a fourth time, and you'll see that it will work for the third and fourth time without refreshing the page, but fail again for subsequent clicks, unless you repeat this delete-re-insert procedure on every 2nd click on the rectangle, which is a rather hacky not-solution to me.
I supposed that this info may be useful to solve my problem, as it indicates that my problem's somehow related to an unaccessible tracked state of the present animateTransform tags, which can be eliminated by renewing these tags on every 2nd click.
As this is not a real solution, I'd still really like to understand what's going on here..?
UPDATE 2
How come that the snippet above actually does not ainmate the transforms AT ALL in Safari?? According to the specs, animateTransform is supported for all except IE... (for which I'll use Fakesmile when done..)?
I've only noticed it now; you may check my problem in FF and Chrome, where the snippet behaves as described.
Doing it programmatically via document.getElementById("activate_project_10").beginElement() does actually work, but is this really necessary? Which is the standard approach for svg animatransforms in safari?

Okay, found a solution which works in FF and Chrome. The principal thought was to overwrite, after finishing the last animation of inactivate_project_10 animation, the state of the transform property with the initial value, before triggering the first one of the activate_project_10 animation. All this while thus using replace instead of sum as the value of additive for the last resetting animation, while using accumulate=sum to assure that the accumulated (thus actually the resetted) value is taken for the reset.
And this actually worked:
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
<rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
<animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
<set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
</rect>
<rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
<animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
<set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
</rect>
<text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
<tspan>Upper Title</tspan>
<tspan class="project-name-span" x="17" dy="15">lower title</tspan>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="1" dur="0.01s" from="-90 17 121.2" to="-90 17 121.2" fill="freeze" additive="replace" accumulate="sum" begin="inactivate_project_10.end"></animateTransform>
</text>
</svg>
The main modifications were:
changed the dur in the two main animateTransforms (inactivate_project_10 and activate_project_10) to the same time as the combined translation + rotation animations of 0.5s.
added the last animateTransform tag to reset the transform state to the initial state to be able to toggle the animation in an endless loop of clicking. Use a particularly short duration (0.01s used) to reset as fast as possible when finishing a toggle cycle, to quickly be ready for the next one, if triggered again.
Yet, I'd still like to know why this is not working AT ALL in Safari..? Even if you use beginElement(), that only works for the first two toggles, and then stops working..

How to drag a SVG to start an animation?

I have made a beer tap where you can click on the handle to start the animation.
I would like to change it so that you have to click and drag the handle back to start the animation. How would something like this be achieved?
If you cannot drag to activate the animation. How can I speed up the pulling back animation and freeze it at the pulled back position until complete?
I would also like to know why the small bubbles do not stop and reset when the handle is clicked again like the rests of the animation?
JsFiddle to SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="233.816px" height="643.371px" viewBox="0 0 233.816 643.371" enable-background="new 0 0 233.816 643.371"
xml:space="preserve">
<path id="pour" fill-rule="evenodd" clip-rule="evenodd" fill="#C06028" d="M134.793,600.695c0,2.761-2.239,5-5,5h-5c-2.761,0-5-2.239-5-5
v-340c0-2.761,2.239-5,5-5h5c2.761,0,5,2.239,5,5V600.695z" opacity="0">
<set attributeName="opacity" to="1" begin="taphandle.click" repeatCount="0" fill="freeze" />
<animate id="animatePour" dur="0.1s" attributeName="opacity" from="1" to="0" begin="taphandle.click + 4.9s" repeatCount="0" fill="freeze" />
</path>
<g id="beer-glass_1_">
<g id="beer_1_">
<linearGradient id="beer-fill-g" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0" stop-opacity="1" stop-color="#C06028">
<animate id="#animateBeer1"attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="taphandle.click" fill="freeze"/>
</stop>
<stop offset="0" stop-opacity="0" stop-color="#C06028">
<animate id="#animateBeer2" attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="taphandle.click" fill="freeze"/>
</stop>
</linearGradient>
<path id="beer-fill" fill-rule="evenodd" clip-rule="evenodd" fill="url(#beer-fill-g)" d="M80.068,383.621
c-0.731,4.043,0.561,17.75-0.415,24.842c-2.13,15.49-0.908,28.531,0.895,36.818c2.295,10.549,5.457,21.016,6.568,31.691
c2.496,23.989,4.08,48.079,5.804,72.144c1.403,19.584,2.343,39.203,3.899,58.773c0.143,1.793,3.068,4.441,5.066,4.832
c10.412,2.041,20.926,4.717,31.436,4.861c19.596,0.268,39.221-0.885,58.813-1.842c4.91-0.24,9.746-1.992,14.617-3.043
c2.994-0.645,4.346-2.301,4.535-5.545c1.4-24.098,3.053-48.18,4.475-72.277c1.855-31.391,4.037-62.657,11.771-93.394
c1.838-7.306,3.26-29.661,1.873-44.111c-0.568-5.906-0.922-8.063-0.717-11.75L80.068,383.621z"/>
<g id="beer-bubbles">
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="108.337" cy="631.698" r="5">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 3s"
dur="2s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="133.793" cy="630.698" r="4">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 2s"
dur="3s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="181.17" cy="636.198" r="4.5">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 5.5s"
dur="1s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="204.337" cy="622.622" r="5">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 3.5s"
dur="1.5s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="164.003" cy="626.622" r="4">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 2s"
dur="3s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="122.293" cy="620.122" r="2.5">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 5s"
dur="1s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="187.17" cy="624.122" r="1.5">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 4s"
dur="1.5s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="149.837" cy="634.198" r="2.5">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 5s"
dur="2s"
repeatCount="indefinite"/>
</circle>
<circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="104.837" cy="619.122" r="1.5">
<animateTransform attributeName="transform"
type="translate"
from="0 0"
to="0 -250"
begin="taphandle.click + 2s"
dur="3s"
repeatCount="indefinite"/>
</circle>
</g>
</g>
<path id="glass-light" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.138,412.893
c-7.283-0.969-7.33-0.976-8.471,6.327c-2.135,13.66,1.293,26.705,3.902,39.969c3.234,16.442,5.487,33.095,7.663,49.723
c1.531,11.703,2.247,23.514,3.282,35.28c0.293,3.328,1.399,5.123,4.586,3.42c0-10.257,0.45-20.234-0.104-30.155
c-0.844-15.104-1.839-30.24-3.801-45.228c-1.547-11.831-5.221-23.38-6.855-35.205C98.267,429.25,99.138,421.208,99.138,412.893z"/>
<path id="glass_1_" opacity="1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M234.15,406.965
c-0.014-0.075-2.215-51.691-2.229-51.76c-0.605-2.835-3.385-1.696-5-0.793c-0.01,0.156,2.971,52.208,2.963,52.364
c-0.613,11.878,0.381,24.086-2.236,34.485c-7.735,30.736-9.917,62.003-11.771,93.394c-1.423,24.097-3.074,48.18-4.476,72.277
c-0.188,3.244-1.54,4.9-4.534,5.545c-4.871,1.05-9.707,2.803-14.617,3.043c-19.592,0.957-39.218,2.109-58.813,1.841
c-10.51-0.145-21.024-2.819-31.437-4.86c-1.998-0.391-4.923-3.039-5.066-4.833c-1.557-19.57-2.497-39.188-3.899-58.772
c-1.724-24.065-3.307-48.154-5.804-72.145c-1.111-10.676-4.273-21.143-6.567-31.69c-2.504-11.511-2.756-25.218-0.936-37.101
c0.124-0.809,0.32-52.052,0.463-52.843c-2.516-1.228-3.44-0.6-4.063,0.005c-0.246,0.239-1.166,52.796-1.186,52.916
c-0.515,2.971-1.537,8.079-1.939,10.334c0,4,0,8,0,12c0.937,5.031,1.485,10.173,2.876,15.076
c6.298,22.195,8.559,44.973,10.181,67.853c1.175,16.572,2.348,33.146,3.4,49.726c1.293,20.367,2.598,40.735,3.618,61.116
c0.412,8.237,2.684,12.077,10.593,14.702c3.285,1.091,6.725,1.868,10.156,2.33c6.703,0.902,13.448,1.483,20.176,2.197
c13.333,0,26.666,0,40,0c3.264-0.371,6.563-0.554,9.785-1.15c7.938-1.472,15.993-2.617,23.703-4.901
c5.107-1.513,7.354-5.948,7.484-11.659c0.27-11.767,0.885-23.535,1.705-35.279c2.328-33.334,4.05-66.737,7.555-99.951
c2.092-19.845,7.08-39.383,10.768-59.059c0-4.333,0-8.667,0-13C234.539,415.778,234.607,409.392,234.15,406.965z"/>
<path id="foam" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M227.107,357.142c0.008-0.202,0.029-0.4,0.029-0.604
c0-8.284-6.715-15-15-15c-1.994,0-3.894,0.397-5.634,1.104c-3.636-3.758-8.724-6.104-14.366-6.104c-2.441,0-4.77,0.459-6.933,1.26
c-3.116-1.395-6.565-2.177-10.2-2.177c-5.556,0-10.686,1.814-14.836,4.88c-3.33-2.478-7.444-3.963-11.914-3.963
c-6.477,0-12.217,3.092-15.872,7.865c-3.65-2.085-7.873-3.282-12.377-3.282c-4.183,0-8.122,1.032-11.586,2.848
c-1.612-0.592-3.346-0.932-5.164-0.932c-5.568,0-10.416,3.041-13.004,7.545c-9.739,1.345-17.246,9.68-17.246,19.789
c0,11.046,8.954,20,20,20c4.576,0,8.78-1.554,12.15-4.14c4.152,3.071,9.288,4.89,14.85,4.89c2.877,0,5.638-0.492,8.21-1.387
c1.578,0.564,3.269,0.887,5.04,0.887c4.178,0,7.955-1.711,10.674-4.468c3.667,4.21,9.053,6.884,15.075,6.884
c6.28,0,11.878-2.9,15.545-7.428c0.152,0.003,0.303,0.012,0.455,0.012c0.599,0,1.191-0.029,1.779-0.07
c2.53,4.71,7.5,7.914,13.221,7.914c4.706,0,8.902-2.171,11.652-5.563c3.542,3.183,8.211,5.135,13.348,5.135
c11.045,0,20-8.954,20-20C235.003,366.547,231.898,360.795,227.107,357.142z" transform="translate(0, 250)"opacity="0">
<set attributeName="opacity" to="1" begin="taphandle.click" repeatCount="0" fill="freeze" />
<animateTransform id="animateFoam"
attributeName="transform"
type="translate"
from="0 250"
to="0 0"
begin="taphandle.click"
dur="5s" fill="freeze"/>
</path>
</g>
<g id="tap">
<path id="taphandle" class="handle" fill="#888888" d="M123.077,164.857l-2.97-158.875c0-3.304,6.71-5.982,14.981-5.982
c8.275,0,14.984,2.678,14.984,5.982l-2.996,160.327h-0.242c1.662,2.89,2.641,6.394,2.641,10.168
c0,9.914-6.707,17.946-14.983,17.946c-8.273,0-14.982-8.034-14.982-17.946C119.509,172.044,120.853,167.988,123.077,164.857z">
<animateTransform id="animateHandle"
attributeName="transform"
type="rotate"
from="0 130 160"
to="-15 130 160"
begin="taphandle.click"
dur="5s"/>
</path>
<path id="tap_1_" fill="#999999" d="M174,193.621h-21.575c0-9.914-8.051-17.947-17.979-17.947s-17.979,8.035-17.979,17.947H84.69
l1.711-28.459c0-0.826-2.685-1.496-5.993-1.496c-3.311,0-5.993,0.67-5.993,1.496l1.711,28.459H47.348l-5.994-5.984v-4.787
c0-3.963-2.685-7.178-5.993-7.178H17.378c-2.968,0-5.427,2.588-5.902,5.982H5.992c-3.31,0-5.993,2.678-5.992,5.982v47.858
c0,3.305,2.685,5.981,5.992,5.981h5.483c0.478,3.396,2.937,5.983,5.903,5.983h17.98c3.31,0,5.991-3.215,5.991-7.183V233.7
l5.993-5.982h38.854l29.595,43.978c1.898,2.707,8.933,1.063,15.711-3.678c6.779-4.738,10.735-10.771,8.838-13.479l-18.758-28.018
l50.621-2.99c3.309,0,7.791-6.695,7.791-14.957C179.995,200.316,177.312,193.621,174,193.621z"/>
</g>
</svg>

SVG line rotation and animation

I'm trying to have a line moving between two points.
In order to need only one gradient, I'm rotating the line using transform.
See this for details : SVG gradients direction
Now when I apply the animation on the line it behaves strangely.
It's not going anywhere near the real destination, and I don't really understand what's happening.
Which is particulary weird is that if I remove the rotate transformation, the lines goes to the right point (but then obviously it's not having the right gradient).
<svg height="670.9" width="1920">
<defs>
<linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred">
<stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" />
</linearGradient>
</defs>
<circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/>
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197044254" x1="964" y1="426" fill="url(#linegradred)" stroke="url(#linegradred)" x2="1030" y2="492" transform="rotate(-146.5346206536447 964 426)">
<animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" />
<animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" />
<animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" />
<animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" />
</line>
<circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197045251" x1="590" y1="344" fill="url(#linegradred)" stroke="url(#linegradred)" x2="707" y2="461" transform="rotate(-63.84566422168709 590 344)">
<animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" />
<animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" />
<animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" />
<animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" />
</line>
<circle cx="771" cy="363" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197046253" x1="771" y1="363" fill="url(#linegradred)" stroke="url(#linegradred)" x2="838" y2="430" transform="rotate(-85.99981423948691 771 363)">
<animate attributeName="x1" attributeType="XML" to="924" fill="freeze" dur="1.1s" />
<animate attributeName="y1" attributeType="XML" to="230" fill="freeze" dur="1.1s" />
<animate attributeName="x2" attributeType="XML" to="924" fill="freeze" dur="1s" />
<animate attributeName="y2" attributeType="XML" to="230" fill="freeze" dur="1s" />
</line>
</svg>
Here's a fiddle : https://jsfiddle.net/qj7z2hhr/
Any help to understand why this behaves like that would be greatly appreciated.

In SVG files, anything that is lower in the hierarchy is affected by things in their ancestor elements. So all the coordinates in your animations are also being affected by the rotation you are applying to their parent element (the line).
If you want to fix it, you will have to apply the translate animation after (ie. higher up than) the rotation. One way you could do that would be to surround the line with a group. Apply the rotation to the line and an animateTransform to the group.
Update
Actually what I suggested wouldn't work. I didn't account for the fact that you are animating both the start and end points of the line.
But I have another suggestion. Make each line be a vector based at (0,0) and be the length match the original line. I.e.:
x1=0 y1=0
x2=(x2-x1) y2=(y2-y2)
Then you can create your desired animation as a combination of three animation components.
a translate between the original start and end points.
a scale from 1 to 0 to make the start and end converge to a single point
a fixed rotation transform to make your line and gradient point in the correct direction
Here's the result. I've just implemented two of the lines to show you how it works. I'll leave you to decide whether this is simpler than just having multiple gradients, or not.
<svg viewBox="0 0 1920 670.9">
<defs>
<linearGradient y2="100%" x2="100%" y1="0%" x1="0%" id="linegradred">
<stop style="stop-color:#F70D1A;stop-opacity:0" offset="0%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.3" offset="50%" />
<stop style="stop-color:#F70D1A;stop-opacity:0.8" offset="100%" />
</linearGradient>
</defs>
<circle cx="964" cy="426" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc"/>
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197044254"
x2="66" y2="66"
fill="url(#linegradred)" stroke="url(#linegradred)">
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="964 426" to="924 230" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="0" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-146.5" to="-146.5" dur="1.1s"
additive="sum" fill="freeze" />
</line>
<circle cx="590" cy="344" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<circle cx="924" cy="230" r="4" stroke="black" fill="black" opacity="0.5" class="circle_loc" />
<line class="svg_line_red" id="line_1442197045251"
x2="117" y2="116"
fill="url(#linegradred)" stroke="url(#linegradred)">
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="590 344" to="924 230" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="0" dur="1.1s"
additive="sum" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-63.8" to="-63.8" dur="1.1s"
additive="sum" fill="freeze" />
</line>
</svg>

What is the difference of SVG's additive="sum" between duration

The difference of the following code?
Why the result is different from?
I thought it was the same.
However, different results when the cell actually animation.
<svg width="1000" height="1000">
<circle cx="10" cy="10" r="10">
<animate
attributeType="XML" attributeName="cx"
dur="10s" values="100; 200; 100"
repeatCount="indefinite" />
<animate
attributeType="XML" attributeName="cx"
dur="10s" values="0; 300; 0"
repeatCount="indefinite" additive="sum" />
</circle>
</svg>
<svg width="1000" height="1000">
<circle cx="10" cy="10" r="10">
<animate
attributeType="XML" attributeName="cx"
dur="19s" values="100; 200; 100"
repeatCount="indefinite" />
<animate
attributeType="XML" attributeName="cx"
dur="1s" values="0; 300; 0"
repeatCount="indefinite" additive="sum" />
</circle>
</svg>

Its not the time thats additive, if thats what you think, its the value of the attribute (cx).
As you have 2 animations running at the same time, cx will build up as a combination of whatever the values of cx are on each animation.
On the 2nd example. As one of the animations is only 1 second long, it will fluctuate very fast, on top of a slower animation.
If you forget about the additive for the moment, and just replace the 2nd cx value with cy on both, you will see why the animations are fundamentally different as well.

The ‘set’ element - loop

I have:
<set attributeName="visibility" attributeType="CSS" to="visible" begin="5s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="10s" fill="freeze"/>
I want the loop to perform these instructions.

If you want the item to continuously "blink" on and off, you need to set the animations to have a duration and begin when the other ends. For example:
Demo: http://jsfiddle.net/rnSFY/
<svg xmlns="http://www.w3.org/2000/svg">
<circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
<set id="show" attributeName="visibility" attributeType="CSS" to="visible"
begin="0s; hide.end" dur="1s" fill="freeze"/>
<set id="hide" attributeName="visibility" attributeType="CSS" to="hidden"
begin="show.end" dur="1s" fill="freeze"/>
</circle>
</svg>​

Rather than toggling back and forth between two different static set elements, you can use a single animate that switch between hidden and visible indefinitely.
Then you also don't need to worry about wiring up the begin timing with the end event of another named animation
<svg xmlns="http://www.w3.org/2000/svg">
<circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
<animate attributeType="CSS"
attributeName="visibility"
from="visible"
to="hidden"
dur="1s"
repeatCount="indefinite"/>
</circle>
</svg>

Resources