W3C home > Mailing lists > Public > www-svg@w3.org > September 2000

Re: translate and rotations

From: Jon Ferraiolo <jferraio@Adobe.COM>
Date: Fri, 08 Sep 2000 19:39:44 -0700
Message-Id: <4.2.2.20000908193622.00d03730@mailsj.corp.adobe.com>
To: antoine@graougraou.com
Cc: www-svg@w3.org
The following code works for me:

<svg width="100" height="100">
    <g>
       <animateTransform attributeName="transform" type="translate" 
from="26.85,0" to="26.85,0" begin="0s" repeatCount="indefinite" 
additive="sum"/>
       <animateTransform attributeName="transform" type="rotate" from="0" 
to="360" begin="0s" dur="4s" repeatCount="indefinite" additive="sum"/>

       <path style="fill:blue;stroke:blue;stroke-width:4;"
d="M22.6,5.4H8.5"/>
       <path style="fill:red;stroke:red;"
d="M11.8,9.8L9.9,5.4l1.9-4.4L1.3,5.4l10.5,4.4z"/>
    </g>
</svg>

The key concept is that <animateTransform> is the equivalent of changing 
the 'transform' attribute on a given element. In the example above, the two 
<animateTransform> elements modify the 'transform' attribute on the <g>. 
The animations are additive, which causes two transformations to be applied 
to the <g>. The first one is a translation, which shift the origin of the 
coordinate system to the center of the graphics. The second one rotates 
about the new origin.

Jon Ferraiolo
SVG Editor
Adobe Systems Incorporated

At 02:11 AM 9/9/00 +0200, antoine j. quint, esq. wrote:
>hello,
>
>I'm having a bit of a headache in trying to animate my SVG. First of
>all, I've got those two paths that form together an arrow...
>
>       <path style="fill:#000000;stroke:#000000;stroke-width:4;"
>d="M22.6,5.4H8.5"/>
>       <path style="fill:#000000;stroke:#000000;"
>d="M11.8,9.8L9.9,5.4l1.9-4.4L1.3,5.4l10.5,4.4z"/>
>
>The thing that I would like to rotate this very arrow around itself. I
>can't manage to rotate it exactly around the center of both the
>paths, it's driving me crazy.
>
>My other problem is about keySplines on a translation. Is that
>possible at all or is that a missing feature of the Adobe player (if
>anyone has a clue). Thanks for your help, I don't think I quite get
>how to rotate paths...
>
>antoine
>
>   antoine@graougraou.com
>   http://thecardigans.com
>   http://www.graougraou.com
>   http://www.romain-gary.org
Received on Friday, 8 September 2000 22:45:17 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 5 November 2012 23:52:48 GMT