如何使用AnimAtemotion更改SVG图像的开始位置？

Question

我正在尝试更改SVG映像的启动位置，以使用and AnimAtemotion沿路径进行动画动画，

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

在此小提琴中，我使用一个圆圈来模拟我的图像。

问题是，

• 如果我使用cx = 0和cy = 0，
• 如果我使用cx = 0和<代码> cy = 100 ，圆的位置完美，但动画在y axis中以100的值移动。

我在做什么错？

Answer 1

您可以为圆圈提供所需的CX和CY（cx =“ 6.25” CY =“ 100”）和set当动画开始时，这些属性为0。

请阅读有关 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>