SVG线条旋转和动画

我试着让一条线在两点之间移动

为了只需要一个渐变，我正在使用

变换旋转线条

有关详细信息，请参见：

现在，当我在线条上应用动画时，它的行为异常。
它离真正的目的地一点也不近，我真的不明白发生了什么

特别奇怪的是，如果我去掉
rotate
变换，线条会指向正确的点（但很明显，它没有正确的渐变）



任何有助于理解这种行为的帮助都将不胜感激。
在SVG文件中，层次结构中较低的任何内容都会受到其祖先元素中的内容的影响。因此，动画中的所有坐标也会受到应用于其父元素（线）的旋转的影响

如果要修复它，则必须在旋转之后（即高于）应用平移动画。有一种方法可以做到这一点，那就是用一组人围成一条线。将旋转应用于直线，并将
animateTransform
应用于组

更新

事实上，我的建议行不通。我没有说明您正在为直线的起点和终点设置动画这一事实

但我有另一个建议。使每一行成为基于（0,0）的向量，并使其长度与原始行匹配。即：

x1=0        y1=0
x2=(x2-x1)  y2=(y2-y2)

然后，可以将所需动画创建为三个动画组件的组合

原始起点和终点之间的平移
从1到0的比例，使起点和终点收敛到单个点
固定旋转变换，使直线和渐变点指向正确的方向
这是结果。我刚刚实现了其中两行，向您展示了它是如何工作的。我将让您决定这是否比只使用多个渐变更简单


请用一个基本的例子来说明你的答案好吗？
x1=0        y1=0
x2=(x2-x1)  y2=(y2-y2)