How to animate a shape with rotation along a path

When I use a rotate transform, the coordinate of the current element will be changed. See this example.

Is there someone that knows how to control the coordinates or give me some suggestions about making a rotated element animate along a path (some browsers don't support the animateMotion tag using javascri开发者_JAVA技巧pt).

I find it easiest to rotate elements around the origin, and then use groups to add additional transformations.

For example, this rotates something 45 degrees, moves to 50 pixels down and left, then animates it from (50, 50) to (100, 150) over 10 seconds:

<g> 
  <animateTransform attributeName="transform"
                    attributeType="XML"
                    type="translate"
                    from="50 50" to="100 150"
                    dur="10s" fill="freeze"/> 
  <g transform="translate(50,50) rotate(45)">
     Your elements here
  </g>
</g>

You can build up quite complex animations this way: http://www.petercollingridge.co.uk/blog/svg-seedling-animation

If you have a more specific description of what you want I might be able to help.