我试图更改动画的起点，可以在https://codepen.io/anon/pen/vdmMOJ看到。
问题是如何让蓝色圆圈从它自己的位置开始，而不是捕捉到另一个位置然后动画开始。
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s" path="M181.50000762939544 -291.6000061035156M-166.49999237060456 -291.6000061035156A348 348 0 1 0 529.5000076293954 -291.6000061035156A348 348 0 1 0 -166.49999237060456 -291.6000061035156" begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>
答案 0 :(得分：1)
使用动作路径时，如果从（0,0）开始，它总是很多。这样就消除了很多需要补偿动画元素和运动路径之间差异所需的半复杂算术。
让我们假装点在LHS（9点钟位置）上开始。运动路径是这样的：
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s"
path="M 0, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0"
begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>
但相反，您已将其定位在圆圈上的其他位置。我们需要计算出角度以计算新的运动路径。
点位于（215.5,231.6）。蓝色圆圈的中心位于（397，-60）。 因此，相对于中心，点位于（-181.5,291.6）。
现在我们知道，我们也知道运动路径圆的另一侧是181.5，-291.6。因此，我们可以使用该信息更新运动路径。运动路径arc（a）命令的值将是coord值的两倍（363和583.2）。
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s"
path="M 0, 0
a 348,348 0 1, 0 363, -583.2
a 348,348 0 1, 0 -363, 583.2"
begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>
但是哦，哦。运动路径现在很不稳定。它膨胀。是什么造成的？答案是我们用于点（-181.5,291.6）的坐标不完全在圆上。我们可以通过计算这些值对应的半径来检查。
r = sqrt(-181.5^2 + 291.6^)
= 343.47
这与我们的圆的半径不同（348）。我们可以通过按比例（348 / 343.47）
来调整坐标值来解决这个问题新坐标现在是（183.9,295.4）。如果我们使用这些值来代替更新运动数学，我们得到：
<svg width="500px" height="100%" viewBox="-500 -500 1500 1500">
<defs id="SvgjsDefs1225"></defs>
<path id="SvgjsPath1226" d="
M 397.0000000000009, -60
m -348, 0
a 348,348 0 1, 0 696,0
a 348,348 0 1, 0 -696,0
" fill="none" stroke="#c9e3ff" stroke-width="12"></path>
<g id="SvgjsG1234" class="circleFive">
<circle id="SvgjsCircle1243" r="34.6" cx="215.5" cy="231.6" fill="#022549" cursor="pointer"></circle>
<path id="SvgjsPath1244" d="M28,38.92A10.59,10.59,0,0,0,32.83,40c2,0,3.5-1.18,3.5-3s-1.64-3-4-3a10.83,10.83,0,0,0-4,.71l.5-12.46H41V27H33.73l-.12,3.29a6,6,0,0,1,1.33-.12c4.19,0,7.25,2.91,7.25,7.53S38.69,45,33.61,45A11.4,11.4,0,0,1,28,43.79Z" transform="matrix(1, 0, 0, 1, 181.136, 199.592)" cursor="pointer" fill="white"></path>
<animateMotion dur="4s"
path="M 0, 0
a 348,348 0 1, 0 367.8, -590.8
a 348,348 0 1, 0 -367.8, 590.8"
begin="click" fill="freeze" calcMode="linear" keyTimes="0;1" keyPoints="1;0" repeatCount="1"></animateMotion>
</g>
</svg>
答案 1 :(得分：0)
圆圈有自己的起始位置：
其坐标（起点）由 cx 和 cy
定义circle cx="215.5" cy="231.6"
但这是由transform属性操纵的：
transform="matrix(1, 0, 0, 1, 181.136, 199.592)"
动画开始的路径由animateMotion的路径定义。
路径中首先协调的两个路径是：
animateMotion Path="M181.50000762939544 -291.6000061035156 [...]"
让我们开始删除圆上的变换。自动生成程序喜欢使用它们，这使得人类无法计算坐标。
然后更改圆的起始位置，使其与路径上的animateMations起始位置匹配。