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/

Was it helpful?

Solution

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>

OTHER TIPS

An excellent question. When I first used animateMotion I was quite puzzled since my rectangles mysteriously dissappeared from the view and returned to their original position only when the animation ended (fortunately, I didn't use fill="freeze"). The problem is that all tutorials and examples use x="0" and y="0" for animated objects, which doesn't help much.

What realy happens: when you animate an object along path, then its x and y position refers to a new coordinate system. Its origin (point 0,0) slides along the path, and its axes (by default) are parallel to the global ones - x axis is horizontal and y axis is vertical. When you specify rotate="auto" then the axes rotate so the x axis is a tangent to the path. In effect, the animated object not only rotates, but follows quite different path. See this sketch:

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top