CODEWITHSUNDEEP
svgsvg-animate
Sergey Onishchenko
Sergey Onishchenko

Reputation: 7851

svg animateTransform trigger multiple animations simultaneously

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();

Upvotes: 4

Views: 10840

Answers (1)

CodeGems
CodeGems

Reputation: 559

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

Upvotes: 18

Related Questions