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>