Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

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

<svg width="500" height="500" >

<!-- Scaling a text element -->
<text x="5" y="15" style="font-size: 4pt;fill:blue;">
SVG is Fun !
<animateTransform attributeName="transform" type="scale" from="1" to="5" begin="0" dur="4s" fill="freeze"/>
</text>

<!-- Rotating an element -->
<rect fill="red" stroke="gray" stroke-width="5px" x="80" y="170" width="50" height="50">
<animateTransform attributeType="XML" attributeName="transform"
type="rotate" from="0,80,170" to="360,80,170"
begin="0s" dur="5s" repeatCount="indefinite"/>
</rect>

</svg>

In the first example, the <animateTransform> element is used to set the transform animation properties for the <text> element.The type of transform is scale, by increasing from 1 to 5, so the text ends up being five times bigger. We use the begin attribute which tells the SVG viewer when to begin the animation. The dur attribute implies that it will take 4 seconds to complete the scaling. Finally, the text retains at the enlarged size.

in the second example, the <animateTransform> tag is used to set the transform animation properties for the <rect> element. The type of transform is rotate, and the from and to attributes are used to specify that the element will rotate from an angle of 0 degrees to 360 degrees. The other two parameters in the from and to attributes, namely the two 80,180 values, represent the coordinates for the rotation point for the animation. The animation duration is set to five seconds for a full rotation. Finally, the repeat count is set to repeat indefinitely.

Code Example - Multiple transformation animations

SVG Image

<g>
<g>
<!-- Draw a Duck -->
<path d="M 40 100 c 40 48 120 -32 160 -6 c 0 0 5 4 10 -3 c 10 -103 50 -83 90 -42 c 0 0 20 12
30 7 c -2 12 -18 17 -40 17 c -55 -2 -40 25 -20 35 c 30 20 35 65 -30 71 c -50 4 -170 4 -200 -79z" style="fill: green; stroke:black;">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="0.4"
to="0.3" begin="0s" dur="10s" fill="freeze" />
</path>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0"
to="21" begin="10s" dur="10s" fill="freeze" />
</g>
<animateTransform attributeName="transform" attributeType="XML" type="translate"
from="0,0" to="90,45" begin="20s" dur="10s" fill="freeze" />
</g>

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

We can also combine multiple transformation animations in the same element. The above example includes the scale, rotate and translate transformations. So the scaling, rotation and translation of the duck are animated. First, the size of the duck is reduced from 0.4 to 0.3. Second, the duck is rotated from 0 degree to 21 degrees, and finally it moves download to position (90,45) on the coordinate system.

Note that only a single transformation can be animated per element so as to achieve this compound effect. The <path> element is enclosed within two grouping elements and one transformation animation is applied to each.