svg rotation about tx,ty point

<svg viewBox="-50 -50 250 200" xmlns="http://www.w3.org/2000/svg">
  <defs></defs>
  <g>
    <rect x="0" y="0" width="20" height="20" fill="blue"></rect>
    <rect x="0" y="0" width="20" height="20" fill="green" transform="matrix(0, 1, -1, 0, 0, 0)"></rect>
    <rect x="0" y="0" width="20" height="20" fill="grey" transform="matrix(-1, 0, 0, -1, 0, 0)"></rect>
    <rect x="0" y="0" width="20" height="20" fill="teal" transform="matrix(0, -1, 1, 0, 0, 0)"></rect>
    <rect x="0" y="0" width="20" height="20" fill="red" transform="matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, 0)"></rect>
    <rect x="0" y="0" width="20" height="20" fill="orange" transform="matrix(-0.7071, 0.7071, -0.7071, -0.7071, 0, 0)"></rect>
  </g>
  <g transform="translate(70)">
    <rect x="5" y="5" width="20" height="20" fill="blue"></rect>
    <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0, 1, -1, 0, 0, 0)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1, 0, 0, -1, 0, 0)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0, -1, 1, 0, 0, 0)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, 0)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071, 0.7071, -0.7071, -0.7071, 0, 0)"></rect>
  </g>
  <g transform="translate(140)">
    <rect x="5" y="5" width="20" height="20" fill="blue"></rect>
    <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0, 1, -1, 0, 10, 0)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1, 0, 0, -1, 10, 10)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0, -1, 1, 0, 0, 10)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071, -0.7071, 0.7071, 0.7071, -2,5)"></rect>
    <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071, 0.7071, -0.7071, -0.7071, 12, 5)"></rect>
  </g>

<script>
var rect1=document.querySelector('body > svg > g:nth-child(4) > rect:nth-child(5)');
console.log(rect1);
var deg=-45;
var tx=15;
var ty=15;
deg=-45/180*Math.PI;
var a=Math.cos(deg);
var b=Math.sin(deg);
var c=-Math.sin(deg);
var d=Math.cos(deg);
var e=tx*(1-Math.cos(deg))+ty*Math.sin(deg);
var f=ty*(1-Math.cos(deg))-tx*Math.sin(deg);


rect1.setAttribute('transform',`matrix(${a},${b},${c},${d},${e},${f})`);

</script>
</svg>