如何更改 svg animateMotion 的起点？
How to change the start point of svg animateMotion?
我正在尝试更改可以在 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>
Svg 和位置
圆圈有自己的起始位置：
其坐标（起点）由cx和cy
定义
circle cx="215.5" cy="231.6"
但这是由变换 属性:
操纵的
transform="matrix(1, 0, 0, 1, 181.136, 199.592)"
动画开始的路径由 animateMotion 的 path 定义。
路径中最先协调的两个是路径的起点：
animateMotion Path="M181.50000762939544 -291.6000061035156 [...]"
当然可以，但是我该如何解决这个问题？
让我们从移除圆上的变换开始。自动生成程序喜欢使用这些，它使人类无法计算坐标。
然后更改圆的起始位置，使其与路径上的 animateMations 起始位置匹配。
使用运动路径时，如果从 (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。所以我们可以用该信息更新运动路径。运动路径弧 (a) 命令的值将是这些坐标值（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>
我正在尝试更改可以在 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>
Svg 和位置
圆圈有自己的起始位置：
其坐标（起点）由cx和cy
定义circle cx="215.5" cy="231.6"
但这是由变换 属性:
操纵的transform="matrix(1, 0, 0, 1, 181.136, 199.592)"
动画开始的路径由 animateMotion 的 path 定义。
路径中最先协调的两个是路径的起点：
animateMotion Path="M181.50000762939544 -291.6000061035156 [...]"
当然可以，但是我该如何解决这个问题？
让我们从移除圆上的变换开始。自动生成程序喜欢使用这些，它使人类无法计算坐标。
然后更改圆的起始位置，使其与路径上的 animateMations 起始位置匹配。
使用运动路径时，如果从 (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。所以我们可以用该信息更新运动路径。运动路径弧 (a) 命令的值将是这些坐标值（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>