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

Question

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

animateMotion

沿着路径为其设置动画

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

在这个小提琴中，我用一个圆圈来模仿我的形象。

问题是

• 如果我使用

  cx = 0

  和

  cy = 0

  ，动画会从错误的位置开始
• 如果我使用

  cx = 0

  和

  cy = 100

  ，圆圈位置完美，但动画会在

  100

  轴上移动

  y

  值。

我做错了什么？

Answer 1

您可以在动画开始时为圆指定所需的 cx 和 cy (

cx="6.25" cy="100"

) 和

set

这些属性为 0。

请阅读set元素。

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>