Html 启动对象沿SVG路径从随机点移动

这里试图了解SVG。是否有任何方法可以沿SVG路径移动圆，其中圆从路径长度确定的特定点开始移动？ 例如，当对象到达终点时，它会从起点重新开始。使用哪些属性使圆从随机点移动，例如，从20开始，而不是从0开始移动到100？ SVG中有直接的from和to，但我不确定如何正确使用它。此外，我发现

keytimes

在某些情况下是有用的，但它并没有产生预期的结果

在这里，您可以看到SVG的HTML沿着一条路径移动，它当前从一开始就开始：

SVG中有直接的from和to，但我不确定如何使用 这是正确的。此外，我发现键时间在某些情况下是有用的，但是 没有产生预期的结果

可以从路径上的任何点启动SVG动画而不使用JS，但必须在代码中提前确定其位置

为此使用了一对属性

keyPoints="0;1" - movement from start to finish
keyTimes="0;1"   

通过这种方式，您可以控制动画起点的位置，但从理论上讲，从随机选择的点创建动画是不可能的，因为SVG中没有变量，没有数组，也没有用于存储和执行数学函数的指令

在下面的示例中，JS仅用于处理按下控制按钮的事件：

向前地
中间的
返回
var animation1=document.getElementById（“前进”）
函数forwardSVG（）{
动画1.beginElement（）；
} 
var animation2=document.getElementById（“中间”）
函数svg（）{
动画2.beginElement（）；
}  
var animation3=document.getElementById（“返回”）
函数backSVG（）{
动画3.beginElement（）；
}

没有javascript是不行的。纯粹的微笑中没有“随机性”。

keyPoints="0.5;1" - movement from the middle of the way to the end
keyTimes="0;1"   

keyPoints="1;0" - movement from end to start
keyTimes="0;1"