Element Transformation

SVG.js offers four(4) means to set/get & animate element transforms:
(1) myElement.attr({transform:'transform strings'}), (2) myElement.transform({key:value}), (3) myElement.transformMethod(value), (4) myElement.transform(matrix).
This shows examples of each.
SVG.js initially creates a rect, circle, and ellipse.

Select the button below where the elements are dynamically transformed.

myElement.attr({transform:'transform strings'})
myElement.transform({key:value})
myElement.transform({key:value},true)
myElement.transformMethod(value)
myElement.transform(matrix)
transform matrix methods:
Performs a given matrix transformation around a given center point
Returns an exact copy of the matrix
Gets the calculated values of the matrix as an object
Flips matrix over a given axis
Creates an inverted matrix
Multiplies by another given matrix
Returns a native SVGMatrix extracted from the SVG.Matrix instance
Rotates a matrix by degrees
Scales a matrix
Skews a matrix by degrees
Translates matrix by a given x and y value
Converts the matrix to a transform string

SVG Source:
Javascript:

OK in: IE11/Edge/CH55/FF52