JSFiddle - React, Tailwind, and code Playground

by gschutz

HTML

<svg x="0" y="0" width="900" height="600">
    <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(),
    T = svg.createSVGMatrix(),
    T2 = svg.createSVGMatrix(),
    R = svg.createSVGMatrix(),
    S = svg.createSVGMatrix();

var o = 45,
    a = o * Math.PI / 180
    cx = 100,
    cy = 50;


T = T.translate(-cx, cy);
R = R.rotate(o);
T2 = T2.translate(cx, cy);


matrix = matrix.multiply(T).multiply(R);
var m2 = matrix.multiply(R).multiply(T2);

matrix = matrix.multiply(m2);


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

console.log(t);