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

Question

我正在尝试创建一个简单的 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>

Answer 1

球体目前正在用 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>

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

How to make an SVG object follow a path correctly using SMIL

css

svg

svg-animate