JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/sylvester/0.1.3/sylvester.js"></script>
<svg version="1.2" baseProfile="tiny" style="width: 520px; height: 360px;">
    
<rect id="green" style="fill: green;" height="100" width="20"></rect>

<rect id="red" style="fill: red;" height="100" width="20"></rect>
 
<rect id="box" style="fill: transparent; stroke-dasharray: 5,5; stroke:#666; stroke-width:2;" height="50" width="50" x="180" y="200"></rect>
</svg>

JavaScript

var layer = 
{  
    sizeReal   : { "width": 20, "height": 100 }                   
,   sizeScaled : { "width": 10, "height": 50 }
,   position   : { "x": 200, "y": 200 } 

,   scale      : 0.5
,   rotation   : 0
,   matrix     : [ 1, 0, 0, 1, 0, 0 ]
};

var toRadians = function( degrees )
{
    return degrees * ( Math.PI / 180 );
};

var getMatrix = function( rotation, scale, position, size ) 
{
    var radians = toRadians( rotation )
    ,   sin     = Math.sin( radians )
    ,   cos     = Math.cos( radians )
        
    ,   matrixPre = $M(
        [
             [ 1, 0, ( size.width / 2  )]
        ,    [ 0, 1, ( size.height / 2 )]
        ,    [ 0, 0, 1]
        ])
        
    ,   matrix = $M(
        [
            [ (scale *  sin), (scale * cos), position.x]
        ,   [ (scale *  -cos), (scale * sin), position.y]
        ,   [ 0, 0, 1]
        ])
        
     ,   matrixPost = $M(
        [
            [ 1, 0, -( size.width / 2  )]
        ,   [ 0, 1, -( size.height / 2 )]    
        ,   [ 0, 0, 1]
        ])
    ;
    
    return matrixPre.x( matrix.x( matrixPost ) ).elements;
}

setInterval(function()
{        
    if(layer.rotation === 360 )
    {
        layer.rotation = 0;
    }
    layer.rotation++;
    
    layer.matrix = getMatrix( layer.rotation, layer.scale, layer.position, layer.sizeScaled );
        
    // Works it rotates itself around its center.
    //
    $("#green")[0].setAttribute( 'transform', 'translate(' + layer.position.x + ',' + layer.position.y +') rotate(' + layer.rotation +',' + ( layer.sizeScaled.width  / 2 ) + ',' + ( layer.sizeScaled.height / 2 ) + ') scale(' + layer.scale + ',' + layer.scale +')' )    
    
    // Doesn't work it rotates around the left upper corner :(.
    //
    $("#red")[0].setAttribute( 'transform', 'matrix(' + layer.matrix[ 0 ][ 0 ] + ',' + layer.matrix[ 1 ][ 0 ] + ',' + layer.matrix[ 0 ][ 1 ] + ',' + layer.matrix[ 1 ][ 1 ] + ',' + layer.matrix[ 0 ][ 2 ] + ',' + layer.matrix[ 1 ][ 2 ] + ')' );
},50);