svg animateTransform trigger multiple animations simultaneously

Question

In the following example I need all animations to be executed simultaneously. But works only last one.

<g>
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" values="2 100 100; -1 100 100; 1 100 100; -0.5 100 100 0.5 100 100" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale" values="1; 1.2; 1" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0 0; -100 -100; 0; 0" begin="indefinite" dur="0.35s" fill="freeze" />

    <image x="0" y="0" width="200" height="200"  xlink:href="<?php  echo $cck->getValue('project_icon'); ?>" />
</g>

Action has been triggered by js:

var animations = $( $this ).find( 'animateTransform' );
animations[0].beginElement();
animations[1].beginElement();
animations[2].beginElement();

Answer 1

You have few errors in your script:

begin="indefinite"

should be:

repeatCount="indefinite"

in the rotation values you forgot to separate the last value with semicolon and you have an extra semicolon in translate section.

In order to execute few transformations you need to sum the results by adding (no need to add this to first transformation)

additive="sum"

So your code should look like:

<g>
   <animateTransform attributeName="transform" attributeType="XML"
       type="rotate" values="2 100 100;-1 100 100;1 100 100;-0.5 100 100;0.5 100 100" repeatCount="indefinite" dur="0.35s" fill="freeze" />

   <animateTransform attributeName="transform" attributeType="XML"
                      type="scale" values="1;1.2;1" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

   <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0 0;-100 -100;0 0" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

   <image x="0" y="0" width="200" height="200"  xlink:href="<?php  echo $cck->getValue('project_icon'); ?>" />
</g>

BTW rotating your image at 0.5 degrees is unnoticeable so why bother?!

here you can read more about it: SVG-SMIL animation tutorial