Transforming SVG Elements

If you intend to simultaneoously animate various transformations(translate, rotate, scale, and skew) of an SVG element, then use SVG's createSVGTransform. This is an animation of multible transforms applied to rectangle.

Scenerio:Animate rotation and scale of a rectangle. (The rectangle happens to already have been transformed.)

1.) Find its Native Center which is the center of an element's bounding box. This remains constant no matter which transforms has been applied to an element. Therefore this center point can be used as the reference point for stable transforms.
2.) Create an SVG Transform Object whereby transformations can be seamlessly consolidated.
3.) Run the animation.

SVG Source:
Javascript:
OK in:IE11/CH32/FF23