motion in SVG

[adek]

Hello,
I would like to create a polygon which will be rotate in a circle. I created polygon but I have problem with rotation. I don't know how to create the motion. Can anybody help me?

adek

[Dr. Olaf Hoffmann]

Hello,

I think, your requirements are currently underspecified.
Rotation about which point - the center of the polygon?
Do you have it or do you know how to calculate it if you
do not know it?
Lets assume in the following, the rotation point is '1,1'.

The easiest way to get a rotation is to use something
like
<animateTransform
        attributeName="transform"
        type="rotate"
        values="0 1 1;360 1 1"
        dur="10s"
        repeatCount="indefinite" />
as a child element of the polygon element.

Another method is available using
animateMotion on a path like a circle using
elliptical arc commands  (SVG full only)
and rotate="auto".

To change the path data from the polygon
directly with an animation will not result
exactly in a rotation, even if many values
and keySplines are used for the animation.
Anyway similar behaviour for a symmetrical
polygon is sometimes called a pseudorotation
in group theory, if you use for the animation
as many values as the polygon has corners
and you permute in the next value the first corner
to the last position in the point list
(respectively for the opposite pseudorotation the
last the last corner to the first position...).

[adek]

I want to motion on a circle. How create a path? How choose a direction of motion?

[Dr. Olaf Hoffmann]

Hello,

I added an example to compare animateTransform
with animateMotion to move a square along a circle.
It's your choice, animateTransform works better for
this special type of path, if you do not need it as a
path itself.


For animateMotion the circle is created as a
path with elliptical arcs
(see specification for SVG 1.1 full how to do this,
this is a path with three arcs for example).
Another direction is possible with another
path. It starts normally with the beginning of
the path.
But you can add the attributes
keyPoints="1;0" keyTimes="1;0"
to the animateMotion element to determine
the starting point different from the path data,
but this attribute keyPoints is not interpreted
by all viewers (correctly).

For animateTransform the other direction is
simpler -
current direction values="0;360"
opposite direction values="0;-360"
or values="360;0" etc




Sample:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500px" height="500px" viewBox="-500 -500 1000 1000"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">

 
<title>animateTransform and animateMotion examples</title>
<desc>
Move squares along a circle.
</desc>
<defs>
<path id="path01"
      d="M400,0 A400,400 0 0,1 0 400A400,400 0 0,1 -400 0A400,400 0 0,1 400 0"
      fill="none"  stroke="gray" stroke-width="10" />  
</defs>

<rect x="350" y="-50" width="100" height="100"
          fill="none" stroke="red" stroke-width="24">
          <title>red: animateTransform</title>
          <animateTransform attributeName="transform"
                    attributeType="XML" type="rotate"
                    values="0;360" dur="30s" fill="freeze"/>
</rect>

<rect x="-50" y="-50" width="100" height="100"
          fill="none" stroke="blue" stroke-width="16">
          <title>blue: animateMotion</title>
          <animateMotion dur="30s" fill="freeze"
                          rotate="auto">
                <mpath xlink:href="#path01" />
          </animateMotion>
</rect>
<use xlink:href="#path01" />



</svg>

[adek]

Hello,

Thank you for your help but I still have one question. What to do with animateTransform to get the same result as I write rotate="none" in animateMotion?

[adek]

Hello,

What mean the numbers?
>        values="0 500 500;360,500,500"


And what mean the numbers?
>        values="0 800,500; -360,800 500"

[Dr. Olaf Hoffmann]

Hello,

this is for rotation, either you have one value, this means
rotation around the origin, or you have three, the second
and the third are the position of rotation axis deviating
from the local coordinate system origin.

rotate(180) is the same as rotate(180 0 0)
rotate(180,100,100) is a rotation around the position 100,100 of
180 degree.
Wether you use white space or comma as separator is not
important.
For animation the animation values are always separated with
semicolon in a values list.

> Hello,
>
> What mean the numbers?
>
> >        values="0 500 500;360,500,500"

Therefore this means always rotate around the position 500,500
start with 0 degree and end with 360

>
> And what mean the numbers?
>
> >        values="0 800,500; -360,800 500"

This is a rotation around the position 800,500
start with 0 degree and end with 360

If you have

values="60 800,500; -300 500,800"

you get a complicate motion, the position of rotation axis
and the rotation itself is interpolated within the animation.
For more details see the transformation chapter of the
specification and the section about animateTransform in the
animation chapter.