W3C home > Mailing lists > Public > www-svg@w3.org > March 2007

Re: [SVG11] motion in SVG

From: Dr. Olaf Hoffmann <Dr.O.Hoffmann@gmx.de>
Date: Fri, 23 Mar 2007 17:22:53 +0100
To: www-svg@w3.org
Cc: mr_wojciech@gazeta.pl
Message-Id: <200703231722.53612.Dr.O.Hoffmann@gmx.de>

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>
Received on Friday, 23 March 2007 16:22:45 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:36 GMT