CODEWITHSUNDEEP
svgjquery-animatesmil
Noobie101
Noobie101

Reputation: 43

SVG animateTransform rotate and scale the same object at the same time?

I'd like to animate scaling and rotating an object at the same time.. so far my attempts failed. I can only chain the animation (rotate, then scale) but not rotate and scale together.

What did I miss?

I have tried to remove "additive="sum" but that just overwrites and ignored the scale animation...

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">

<rect x="29.2" y="33.6" width="136.7" height="136.7">

<animateTransform attributeName="transform" type="scale" 
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/> 

<animateTransform attributeName="transform" type="rotate" 
from="0 100 100" to="100 100 100" dur="5s"  repeatCount="indefinite"  accumulate="sum" />


<animate attributeType="CSS" attributeName="opacity" 
from="1" to="0" dur="4s" fill="freeze"  />


</rect>
</svg>

I appreciate all the help!

Upvotes: 4

Views: 2177

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

You just need additive="sum" on both the animate elements. It works fine for me on Firefox with that one change.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">

<rect x="29.2" y="33.6" width="136.7" height="136.7">

<animateTransform attributeName="transform" type="scale" 
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/> 

<animateTransform attributeName="transform" type="rotate" 
from="0 100 100" to="100 100 100" dur="5s"  repeatCount="indefinite"  additive="sum" accumulate="sum" />


<animate attributeType="CSS" attributeName="opacity" 
from="1" to="0" dur="4s" fill="freeze"  />


</rect>
</svg>

Upvotes: 6

Related Questions