如何使用SMIL使SVG对象正确遵循路径

问题描述

我正在尝试创建一个简单的SVG动画（使用SMIL），但我似乎无法弄清楚为什么球体不遵循弧线，而是球体位于页面底部。这是我的代码：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1240 768" style="enable-background:new 0 0 1240 768;" xml:space="preserve">


<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:#0FBA70;}
</style>
<animateMotion xlink:href="#orb" dur="10s" begin="0s" fill="freeze" repeatCount="indefinite">
    <mpath xlink:href="#motionPath" />
</animateMotion>
<g>
    <polygon class="st0" points="389.5,405.5 394,405.5 926.8,400.5 930.5,400.5  "/>
    <path id="motionPath" d="M390.9,407.5l-2.9-4.1C426,377,625,248.9,820.4,327.2c40.5,16.2,78.1,40.3,111.8,71.5l-3.4,3.7
        c-33.2-30.8-70.3-54.5-110.2-70.5C625.5,254.5,428.5,381.3,390.9,407.5z"/>
</g>
<g>
    <circle id="orb" class="st1" cx="389.5" cy="400.5" r="56.5"/>
</g>
</svg>

解决方法

该球体当前被cx和cy值所抵消：

<circle id="orb" class="st1" cx="389.5" cy="400.5" r="56.5"/>

如果删除这些值，则球体将遵循以下路径：

<circle id="orb" class="st1" r="56.5"/>

有关工作示例，请参见https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion，如果在JSFiddle或Codepen中打开它，并添加一个cx或cy值，您将观察到相同的行为（圆圈表示从路径）。

.st0 {
  fill: #FFFFFF;
}

.st1 {
  fill: #0FBA70;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1240 768" style="enable-background:new 0 0 1240 768;" xml:space="preserve">
<animateMotion xlink:href="#orb" dur="10s" begin="0s" fill="freeze" repeatCount="indefinite">
    <mpath xlink:href="#motionPath" />
</animateMotion>
<g>
    <polygon class="st0" points="389.5,405.5 394,405.5 926.8,400.5 930.5,400.5  "/>
    <path id="motionPath" d="M390.9,407.5l-2.9-4.1C426,377,625,248.9,820.4,327.2c40.5,16.2,78.1,40.3,111.8,71.5l-3.4,3.7
        c-33.2-30.8-70.3-54.5-110.2-70.5C625.5,254.5,428.5,381.3,390.9,407.5z"/>
</g>
<g>
    <circle id="orb" class="st1" r="56.5"/>
</g>
</svg>

svg svg-animate