animateTransform Element

The <animateTransform> element is used to animate the object along a straight-line path.

The <animateTransform> element works with rotate, translate, scale or skew transformations.

If you want to rotate the shape then you have to set the attributeName as transform. and type as rotate.

Example

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>

<h1>SVG Image</h1>
<svg xmlns="http://www.javatpoint.org/2000/svg"
 xmlns:xlink="http://www.javatpoint.org/1999/xlink">

<rect x="10" y="10" height="100" width="100"
    style="stroke:black; fill: purple; stroke-width: 2 ">

<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
   begin="0s" dur="10s" from="0 60 60 " to="360 60 60" />
</rect>

</svg>
</body>
</html>

Test it Now

Next TopicThe animateMotion Element

← prev next →