JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="canvas" width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="360" height="369" fill="#3E6E99" />
</svg>
<div id="transform"></div>

JavaScript

(function ($) {
    
    var image = $('#canvas rect');
    var angle = -50;
    
    function calculateAdjustment(width, height, angleRad) {
        return Math.max(
            0,
            width * -Math.cos(angleRad),
            height * Math.sin(angleRad) + width * -Math.cos(angleRad),
            height * Math.sin(angleRad)
        );
    }
    
    function rotateImage(image, angleDeg) {
        angleDeg = angleDeg;
        angleRad = angleDeg / 180 * Math.PI;
        
        var width = parseInt(image.attr('width'), 10);
        var height = parseInt(image.attr('height'), 10);
        
        var xAdjustment = calculateAdjustment(width, height, angleRad);
        var yAdjustment = calculateAdjustment(width, height, angleRad - Math.PI / 2);
        
        var transform = 'translate(' + xAdjustment + ', ' + yAdjustment + ') rotate(' + angleDeg + ')';
        image.attr('transform', transform);
        $('#transform').text(transform);
    }
    
    rotateImage(image, angle);
    
})(jQuery);