• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 8. Animation: SVG and SMIL Anima... > Rotation Using <animateTransform>

Rotation Using <animateTransform>

Take a look at a simple rotation, using a grouping <g> element you used in an example in Chapter 3, “Creating Static Graphics Elements.” The rotation turns the rectangle through 360 degrees in a 9-second period, using its upper-left corner as the pivot point. The code for the transformation is shown here:

<animateTransform begin="1s" dur="10s" type="rotate" 
from="0 150 150" to="360 150 150" 
attributeName="transform"/> 


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint