animate Element

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

The animate element is put inside a shape element and defines how an attribute of an element changes over the animation. The attribute will change from the initial value to the end value in the duration specified.

<!DOCTYPE HTML>
<html>
    <head>
        <title>SVG tutorial</title>
    </head>
    <body>
        <svg width="120" height="120">
            <rect x="10" y="10" width="100" height="100">
                <animate attributeType="XML" attributeName="x" from="-100" 
				to="120" dur="10s" repeatCount="indefinite"/>
            </rect>
        </svg>
    </body>
</html>