SVG Animatetransform Element

by Online Tutorials Library July 14, 2022

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.tutoraspire.org/2000/svg”   xmlns:xlink=”http://www.tutoraspire.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

SVG Animatetransform Element

animateTransform Element

Example

Learn SQLite Tutorial

Difference between function and method in Swift

You may also like