12.9 The <animateTransform> element

The <animate> element doesn't work with rotate, translate, scale, or skew transformations because they're all “wrapped up” inside the transform attribute.

This is where the <animateTransform> element comes to the rescue.
You set its attributeName to transform.
The type attribute's value then specifies the transformation whose values should change (one of translate, scale, rotate, skewX, or skewY).
The from and to values are specified as appropriate for the transform you're animating.
As of this writing, most implementations currently support only <animateTransform> on XML transform attribute rather than the CSS3 transformations.

Example 1. Scale a rectangle 
<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000">
    <use href="grids.svg#grid_100x100"/>
    <g transform="translate(50,50)">
        <rect x="-10" y="-10" width="20" height="20"
            style="fill: #ff9; stroke: black; stroke-width:0.2">
                <animateTransform
                attributeType="XML"
                attributeName="transform" type="scale"
                from="1" to="4 2"
                begin="0s" dur="4s"
                fill="freeze"/>
        </rect>
    </g>
    <circle cx="50" cy="50" r="1" style="fill: red;"/>
</svg>
If you intend to animate more than one transformation, you must use the additive attribute.
The default value of additive is additive="replace", which replaces the specified transformation in the object being animated.
This won't work in a series of transformations, because the second animation would override the first one.
By setting additive = "sum", SVG will accumulate the transformations.
 
Example 2. Scale and rotate rectangle Format of rotation: 
 "angle cx cy" 
  0 0 0 = 0° rotation around point (0, 0) 
  45 0 0 = 45° rotation around point (0, 0)
<svg width="200" height="200" viewBox="0 0 200 200"xmlns="http://www.w3.org/2000/svg">
  <use href="grids.svg#grid_200x200"/>
      <g transform="translate(100,100)">
        <rect x="-10" y="-10" width="20" height="20"
        style="fill: #ff9; stroke: rgba(0,0,0,0.3); fill-opacity:0.3;">
        <animateTransform
                attributeName="transform" attributeType="XML"
                type="scale" from="1" to="4 2"
                additive="sum"
                begin="0s" dur="4s"
                fill="freeze"/>
        <animateTransform id="rot1"
                attributeName="transform" attributeType="XML"
                type="rotate" from="0 0 0" to="45 0 0"
                additive="sum"
                begin="0s"
                dur="4s"
                fill="freeze"/>
        <animateTransform
                attributeName="transform" attributeType="XML"
                type="rotate" from="0 -10 -10" to="60 -10 -10"
                additive="sum"
                begin="rot1.end"
                dur="10s"
                fill="freeze"/>
    </rect>
    <circle cx="0" cy="0" r="2" style="fill:red;"/>
    <circle cx="60" cy="0" r="2" style="fill:blue;">
 <animateTransform
       attributeName="transform" attributeType="XML"
       type="rotate" from="0 -10 -10" to="90 -10 -10"
       additive="sum"
       begin="rot1.end"
       dur="10s"
       fill="freeze"/>
       </circle>
       <line x1="-10" y1="-10" x2="60" y2="0" style="stroke:#aaa;">
         <animateTransform
                   attributeName="transform" attributeType="XML"
                   type="rotate" from="0 -10 -10" to="90 -10 -10"
                   additive="sum"
                   begin="rot1.end"
                   dur="10s"
                   fill="freeze"/>
       </line>
       <circle cx="-10" cy="-10" r="2" style="fill:green;"/>
       <!-- Trace arc for blue circle: radius ~70.7, from 0° to 60° around (-10,-10) -->
       <path d="M 60,0 A 70.7,70.7 0 0,1 -20 60" 
             style="fill:none; stroke:blue; stroke-width:0.5; stroke-dasharray:2,2;"/>

       <circle cx="-10" cy="-10" r="14.1" style="stroke:green; stroke-width:1; fill:none"/>
       <line x1="-10" y1="-10" x2="60" y2="0" style="stroke:#aaa;"></line>
     </g>
  </svg>