JSFiddle - React, Tailwind, and code Playground

HTML

<svg x="0" y="0" width="900" height="600">
    <rect id="rect2" x="150" y="50" width="100" height="200" fill="#a6a"></rect>
    <g id="base">
        <rect id="rect" x="0" y="0" width="200" height="100" fill="#6a6"></rect>
    </g>
</svg>

CSS

svg {
    border: 1px solid #eee;
}

JavaScript

var rect = document.getElementById('base');
var svg = rect.parentNode;

//console.log([rect, svg]);


var matrix = svg.createSVGMatrix();

var o = 0,
    a = o * Math.PI / 180,
    x = 100,
    y = 100,
    cx = x+100,
    cy = x+50,
    sx = 1,
    sy = 1,
    cxs = cx,
    cys = cy;

matrix = matrix.translate(cx, cy);
matrix = matrix.rotate(o);
matrix = matrix.translate(-cx, -cy);

matrix = matrix.translate(cxs, cys);
matrix = matrix.scaleNonUniform(sx, sy);
matrix = matrix.translate(-cxs, -cys);

matrix = matrix.translate(x, y);

var tm = svg.createSVGMatrix();
tm = tm.translate(10,10);
matrix = matrix.multiply(tm);


var t = rect.transform.baseVal.createSVGTransformFromMatrix(matrix);
rect.transform.baseVal.initialize(t);