animateTransform for a group of objects in SVG using InkScape

I recently try to do a presentation in SVG and wanted to do some simple animation on some of the components in the presentation. First of all, I am lucky to come across the Sozi extension for Inkscape. The extension makes Inkscape able to produce presentation very similar to Prezi.

With the framework setup, now it is time to do some element animation. Immediately, I encountered a problem, I used text editor (VIM) to edit the SVG file in order to insert the animation for the elements. The problem I encountered was that when I try to animate (e.g., rotating and scaling) a grouped objects, I cannot find the center. Even I calculate the center correctly, the rotation or scaling behave strangely.

After a few try and hacking, I eventually find a way create grouped object which can be moved or scaled without effecting the animation within the group.

Step 1. Create the component so that its center is at (0, 0) (upper left-hand coiner of Inkscape paper).

Step 2. Add the necessary animation code and put the code inside the group.

Step 3. Add an outer group to the group. In this way, When the group is moved, scaled or rotated, the transformation matrix will be add on the outer most group.

<g id="outer-group">
  <g id="inner-group">
    <path ... />
    <path ... />
    <animateTransform
      attributeType="xml"
      attributeName="transform" type="rotate"
      values="0; 360" dur="2s"
      repeatCount="indefinite" />
  </g>
</g>

The idea is that the inner group cannot have transformation matrix in it, otherwise,

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s