如何使用 animateMotion 更改 svg 图像的起始位置？

Question

我正在尝试更改 svg 图像的起始位置以使用 animateMotion

沿路径设置动画

您可以在此处查看当前结果https://jsfiddle.net/7espvwuz/

在这个fiddle中，我用一个圆圈来模拟我的形象。

问题是

如果我使用 cx = 0 和 cy = 0，动画会在错误的位置开始
如果我使用 cx = 0 和 cy = 100，圆的位置是完美的，但动画在 y 轴上移动了 100 的值。

我做错了什么？

Answer 1

您可以在动画开始时将所需的 cx 和 cy (cx="6.25" cy="100") 和 set 这些属性赋予圆。

请阅读 set element。

var currentIndex = 0;

const pathArray = [
    "M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25", 
  "M25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25", 
  "M36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5",
  "M68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75", 
  "M88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4"];

function buttonClick() {
  set1.setAttribute("cx",6.25);
  set1.beginElement();
  set2.setAttribute("cy",100);
  set2.beginElement();
  motion1.setAttribute("path", pathArray[currentIndex]);
  motion1.beginElement();
  currentIndex++;
}

<button onclick="buttonClick()">Click me</button>
<svg preserveAspectRatio="xMidYMid meet"  xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 450 120" style="background-color: #0010ff3b;">
<path d="M6.25 100 L6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4" stroke='black' strokeDasharray="5, 5" fill='transparent'></path>
  
  <circle id="circle" r="5" cx="6.25" cy="100" stroke="black" stroke-width="3" fill="red" >
    <set id="set1" begin="indefinite" attributeName="cy" to="0"></set>  
    <set id="set2" begin="indefinite" attributeName="cx" to="0"></set>
    
    <animateMotion id="motion1" begin="indefinite" dur="1s" fill="freeze" path="M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25">
    </animateMotion>
  </circle>  
</svg>

如何使用 animateMotion 更改 svg 图像的起始位置？

How to change the start position of svg image using animateMotion?

svg

svg-animate

svg.js