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

11. Animating and Scripting SVG > The animateTransform Element

The animateTransform Element

Just as <animate> doesn’t work with colors, it doesn’t work with rotate, translate, scale, or skew transformations either, since they’re all “wrapped up” inside the transform attribute. The <animateTransform> element comes to the rescue. You set its attributeName to transform. The type attribute’s value then specifies the transformation whose values should change (one of translate, scale, rotate, skewX, or skewY). The from and to values are specified as appropriate for the transform that you’re animating.

Example 11-11 stretches a rectangle from normal scale to a scale of four times in the horizontal direction and two times in the vertical direction. Note that we’ve centered the rectangle around the origin so it doesn’t move as it scales; we place it inside a <g> so it can be translated to a more convenient location. Figure 11-5 shows the beginning and end of the animation.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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