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

user_7940639 0
Viewed 76

I am trying to change the start position of an svg image to animate it along a path using animateMotion

You can check the current result here https://jsfiddle.net/7espvwuz/

In this fiddle I am using a circle to mock my image.

The problem is

  • if I use cx = 0 and cy = 0, the animation starts at a wrong position
  • if I use cx = 0 and cy = 100, the circle is perfectly positioned but the animation is shifted by a value of 100 in the y axis.

What am I doing wrong?

svg.js svg-animate svg
1 Answers

You can give the circle the desired cx and cy (cx="6.25" cy="100") and set those attributes to o when the animation begins.

Please read about the 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>

user_78973950
Related