0

I cannot figure out why the blue ball1 in the following example does not "move to" the point on the path specified in #wire from its starting positions to mimic the path animation of the pink ball2. The ball1 element animation follows the path relative to its initial position by adding M x,y rather than absolutely moving to M x,y first. What gives?

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle
     cx="100"
     cy="20"
     r="8"
     id="ball1"
     style="fill:#529fd9">
    <animateMotion
       begin="4s"
       dur="4s"
       repeatCount="indefinite">
      <mpath
         xlink:href="#wire" />
    </animateMotion>
  </circle>
  <circle
     cx="0"
     cy="0"
     r="8"
     id="ball2"
     style="fill:#FF00FF">
    <animateMotion
       begin="2s"
       dur="4s"
       repeatCount="indefinite"
       path="M 30.3614137,34.984057 H 91.361414 c 0,0 96.336296,1.512455 96.336296,11.762456 0,10.25 -96.086296,11.737544 -96.086296,11.737544 h -43.5 c 0,0 -10.75,0.75 -11.75,11.5 -1,10.75 9.75,12.25 9.75,12.25 H 352.86141">
    </animateMotion>
  </circle>
    <path
     d="M 30.3614137,34.984057 H 91.361414 c 0,0 96.336296,1.512455 96.336296,11.762456 0,10.25 -96.086296,11.737544 -96.086296,11.737544 h -43.5 c 0,0 -10.75,0.75 -11.75,11.5 -1,10.75 9.75,12.25 9.75,12.25 H 352.86141"
     id="wire"
     style="fill:none;stroke:#529fd9;stroke-width:2"/>
</svg>

0

It does not move to the start location because that's simply not how it is works. If you need to compensate for offset the cx and cy you could add a transform. Or just remove them.

In general you should avoid SMIL animations. Using alternative methods of animating that have better support (such as GSAP's motion path functionality) will be easier to use as well as have better browser support.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.