Re: [SVG11] motion in SVG

Hello,

thats simple for a rotation motion, 
but you need two animations using animateTransform.
To understand, whats going on, put the object in a 
g element and shift this g element in such a way, that
the origin is at the radius of the desired motion path.
Now rotate the object around its local orgin in
the opposite angular direction as the rotation of the
g element around its origin.
(This is the opposite effect of the moon rotation.
The moon rotates around its own axis once, while
earth and moon rotate around their common
center of gravity. This meets the behaviour of one
animateTransform. To get the moon fixed in space,
one just has to add an additional rotation around
its own axis in the opposite direction with the same
timing.)

If you do not fear additive animations this can be
simplified too, but then you have to understand in
detail in which order to write this (see below).


Examples assuming a viewBox="0 0 1000 1000".


1) Simple first example (if you do not understand 
    the animation in the second one, use this one):

<g transform="translate(500 500)">
 <title>translate everything to (500;500)</title>
 <g>
   <title>doing the rotation</title>
   <animateTransform
        attributeName="transform"
        type="rotate" 
        from="0"
        to="360" 
        dur="60s"
        repeatDur="indefinite" />
   <g>
     <title>rotate the rect around its 
                 own center at (300;0)</title>
     <animateTransform
        attributeName="transform"
        type="rotate" 
        from="0 300 0"
        to="-360 300 0"
        dur="60s"
        repeatDur="indefinite" />
     <rect x="250" y="-50" width="100" height="100" 
        fill="red" />
   </g>
  </g>
</g>
--------------------------------------------------------------------------------

2) Second example - more animation tricks
(the g can have an additional transform attribute if
required):

<g>
  <title>putting it all together using additive sum</title>
  <animateTransform
        attributeName="transform"
        type="rotate" 
        values="0 500 500;360,500,500"
        dur="60s"
        repeatDur="indefinite"
        additive="sum" />

  <animateTransform
        attributeName="transform"
        type="rotate"
        values="0 800,500; -360,800 500" 
        dur="60s"
        repeatDur="indefinite"
        additive="sum" />

  <rect x="750" y="450" width="100" height="100" 
            fill="red" />
</g>

Received on Wednesday, 28 March 2007 13:56:51 UTC