Native Center Transforms with Wrapper

The Native Center 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 there can be used as the reference point for stable rotation, scale, and skew transforms. By use of an svg wrapper, the element can be translated so its center point moves to a target point.
Scenerio:
The rect element has been translated from its original location (dashed rect). Further scale, rotate, and skew transforms can use the rect's original bounding box center (black circle): NativeCenterX, NativeCenterY.

Also, following scale, rotate, skew...
The center of the element can be moved to a specific target point (maroon circle) by using the center point of it's svg wrapper

Click the buttons one or more times to transform the rect.
then...

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