Issue animating SVG along a path

Question

I want to animate a shape along a path, I have managed to create the path I want, but then, when I animate the shape to move along the path, it seems to reverse along the first part of the path. (forgive me, bit of a noob).

This is the code;

<svg>
    <rect x="-100" y="100" width="200" height="200" style="stroke: none; fill: #FFCC33;">
        <animateMotion path="M200,200
                       a-50,-50 0 0,0 0,-30
                       a-50,-50 0 0,1 0,-30"
                       begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"/>
  </rect>
</svg>

I did fiddle with it as well, this may put it into context better http://jsfiddle.net/fcz69/

Answer 1

There isn't really a question as such (its doing what it should I believe), so not really a solution. But I will try and highlight what is happening, and where the confusion is. I think this is because the rotate="auto" and the x,y of the rect are being taken as combined transforms if you like as it animates along the path. If you change x,y to 0,0 it will highlight this.

To try and make it a bit clearer, I've combined a few rects with different x,y values. Its the same effect as if there was a transform being combined with the rotate.

You will see how the green one seems to reverse, its just that its further out when the rotate is happening.

http://jsfiddle.net/fcz69/4/ is a quick example to highlight whats happening.

The animationMotion element description can be found here http://www.w3.org/TR/SVG/animate.html#RotateAttribute its worth reading the bit on 'rotate' there, but it may take a while to get your head around it, if not used to matrices.

<svg width="600" height="600">
    <path d="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30" fill="none" stroke="black"/>

 <rect x="0" y="0" width="200" height="200"
    style="stroke: none; fill: #FFCC33;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
</rect>
<rect x="-100" y="100" width="200" height="200"
    style="stroke: none; fill: #FF0000;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
 </rect>
    <rect x="-200" y="200" width="200" height="200"
    style="stroke: none; fill: #00FF00;">
  <animateMotion
          path="M200,200
     a-50,-50 0 0,0 0,-30
     a-50,-50 0 0,1 0,-30"
          begin="0s" dur="3s" repeatCount="indefinite"
          rotate="auto"
        />
 </rect>

</svg>