animateTransform

Posted on
  1. You are in : HTML5  >>  Working with Scalable Vector Graphics  >>  

The animateTransform element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing.

Example

<!DOCTYPE HTML>
<html>
    <head>
        <title>SVG tutorial</title>
    </head>
    <body>
        <svg width="120" height="120">
            <!-- Draw the outline of the motion path in grey, along
            with 2 small circles at key points -->
            <polygon points="60,30 90,90 30,90">
                <animateTransform attributeName="transform" attributeType="XML" 
				type="rotate" from="0 60 70" to="360 60 70" dur="10s" 
				repeatCount="indefinite"/>
            </polygon>
        </svg>
    </body>
</html>

Output

Untitled