svg begin="mouseover"not working - svg

Im new at coding and am trying to make a simple line rotate around its center using svg.
I have got the line rotating but everytime I add begin="mouseover" the animation no longer starts.
If anyone could help me get this working with a hover event I will be greatly appreciated.
<svg>
<line id="line_01" x1="20" y1="100"
x2="100" y2="20"
stroke="black"
stroke-width="2" stroke-linecap="round" />
<animateTransform
xlink:href="#line_01"
attributeName="transform"
pointer-events="all"
attributeType="XML"
type="rotate"
from="0 60 60"
to="360 60 60"
dur="3s"
/>
</svg>


You need to precede mouseover with the id of an element e.g.
<svg width="100%" height="100%">
<line id="line_01" x1="20" y1="100"
x2="100" y2="20"
stroke="black"
stroke-width="2" stroke-linecap="round" />
<animateTransform
xlink:href="#line_01"
begin="line_01.mouseover"
attributeName="transform"
pointer-events="all"
attributeType="XML"
type="rotate"
from="0 60 60"
to="360 60 60"
dur="3s"
/>
</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..

Can i create a circle that follow an existing line in svg?

As the title suggests, i'm trying to create an animation in svg with a point/circle that follows an irregular path. I am using the animateTransform, for example:
<animateTransform attributeName="transform"
attributeType="XML"
type="translate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="definite"/>
Can i implement this method (in svg) to let the circle to follow the path, or i have to use necessarily javascript?
If i can do it in svg could you give me a basic example with an explanation?

You can use the <animateMotion> element.
Example adapted from MDN:
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path id="path" fill="none" stroke="lightgrey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite">
<mpath xlink:href="#path"/>
</animateMotion>
</circle>
</svg>

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>

SVG Animation rotate

I've got a very annoying Problem using rotations in my SVG Animation. The problem is: I have an object, which I want to move along a specific path. So far it works well. But if I try to rotate this object at the end of the path it doesn't work. Sometimes my Object disappears because it's outside the viewbox and I have to try many values for the x and y values of the rotate statement until it works. And then it only works if I set the duration to 0.001s so it rotates instant, because actually my object switches to a much higher point in the viewbox and begins to rotate and only the final position is right but you see it rotating down or up around any point so it doesn't really work. I have no idea how to get the x and y values which I need to rotate the object around its own axis. Here is the code example, I hope you know how to solve this problem:
<defs>
<g id="Karte" visibility="hidden">
<!--Karte-->
<rect x="0" y="0" width="980" height="550" style="stroke: none; fill: rgb(189,248,137)" />
<!--Straßen-->
<path id="Straße1" d="M 510 0 L 510 120 0 120 0 150 980 150 980 120 540 120 540 0" style="stroke: none; fill: lightgrey" />
<rect id="Straße2" x="0" y ="320" width="980" height="20" style="stroke:none; fill: lightgrey" />
<rect id="Straße3" x="0" y="500" width="980" height="30" style="stroke:none; fill: lightgrey" />
<rect id="Straße4" x="25" y="340" width="30" height="160" style="stroke:none; fill: lightgrey" />
<rect id="Straße5" x="930" y="340" width="30" height="160" style="stroke:none; fill: lightgrey" />
<path id="campus" d="M 515 150 L 515 170 510 170 510 300 525 300 525 320 650 320 650 300 665 300 665 170 545 170 545 150" style="stroke:none; fill: lightgrey" />
<polyline id="rampe1" points="570,300 570,307 635,317 635,320" style="stroke-width: 1; fill:none" />
<polyline id="rampe2" points="580,300 580,303 645,313 645,320" style="stroke-width: 1; fill:none" />
<g id="Treppe1">
<line x1="515" y1="153" x2="545" y2="153" stroke-width="0.5" />
<line x1="515" y1="157" x2="545" y2="157" stroke-width="0.5" />
<line x1="515" y1="161" x2="545" y2="161" stroke-width="0.5" />
<line x1="515" y1="165" x2="545" y2="165" stroke-width="0.5" />
</g>
<g id="Treppe2">
<line x1="525" y1="303" x2="565" y2="303" stroke-width="0.5" />
<line x1="525" y1="307" x2="565" y2="307" stroke-width="0.5" />
<line x1="525" y1="311" x2="565" y2="311" stroke-width="0.5" />
<line x1="525" y1="315" x2="565" y2="315" stroke-width="0.5" />
</g>
<set attributeName="visibility" to="visible" begin="0s" />
</g>
</defs>
<!--Figuren-->
<defs>
<g id="John" visibility="hidden">
<circle cx="520" cy="100" r="5" />
<line x1="520" y1="104" x2="520" y2="115" stroke-width="2" />
<line x1="520" y1="104" x2="520" y2="117" stroke-width="1" />
<polyline points="520,100 523.5,108 520,112" style="fill:none" />
<polyline points="520,100 514,104 520,108" style="fill:none" />
<set attributeName="visibility" to="visible" begin="0s" />
</g>
</defs>
<!--Animation-->
<use xlink:href="#Karte" />
<use x="420" y="360" transform="rotate(90 910 490)" xlink:href="#John" >
<animateMotion path="M 0 0 L -900 -10" begin="0s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" from="90 940 490" to="180 940 490" begin="6s" dur="0.001" fill="freeze"/>
<animateMotion path="M-900 -10 L -900 -190" begin="6.01s" dur="3.98s" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" from="180 970 490" to="270 970 490" begin="10s" dur="0.001" fill="freeze"/>
<animateMotion path="M -900 -190 L -450 -190" begin="10.01" dur="4.98" fill="freeze" />
<animateTransform attributeName="transform" type="rotate" from="270 940 490" to="180 940 490" begin="15s" dur="0.001" fill="freeze"/>
<animateMotion path="M -450 -190 L -390 -190" begin="15" dur="1" fill="freeze" />
</use>
</svg>

Resources