我正在尝试为 SVG 线端点之一设置动画以沿特定路径移动，而另一个端点静止不动，因此该线在保持直线的同时拉伸和收缩。
到目前为止，我实现的是使我的整条线沿着路径移动，其中一个端点绑定到它：
<svg viewBox="0 0 500 500">
<path stroke="grey" fill="none" id="route" d="M50,25 l25,30 l-40,20 z" />
<g>
<line x1="0" y1="0" x2="150" y2="50" stroke="blue" />
<circle r=5 fill="blue" />
<text x="-5" y="-10">A</text>
<circle cx="150" cy="50" r="5" fill="blue" />
<text x="145" y="40">B</text>
<animateMotion dur="5s" repeatCount="indefinite" >
<mpath xlink:href="#route" />
</animateMotion>
</g>
</svg>我想要得到的是 A 点沿路径移动，B 点静止不动。
我很乐意考虑 CSS/JavaScript 解决方案，但库不是一个选项。
请您帮我指出正确的方向好吗？