JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://smartsmoke.pl/svg/jquery.freetrans.css">
<script src="http://smartsmoke.pl/svg/jquery-1.7.2.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
<script src="http://smartsmoke.pl/svg/Matrix.js"></script>
<script src="http://smartsmoke.pl/svg/jquery.freetrans.js"></script>
Picture should be steady, we are transforming just the clipping mask (so picture could be later moved/scaled inside "Placeholder" as well). The problem is, mask does not follow FT transformations properly after scaling/rotation:

        <div id="ft" class="shape trans" width="300" height="250"></div>


<!-- SVGjs drawing element -->
<div id="drawing">
</div>

CSS

body{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    padding:50px;
    margin:0;
    background:#f2f2f2;
}

.shape{
    width: 300px;
    height: 250px;
    color: #123456;
}

.ft-controls {
    border:1px solid #ff7200;
}

JavaScript

//For testing in Chrome:

//draw svg with SVGJS library
var draw = SVG('drawing').size(530, 400);
var rect = draw.rect(300, 200).attr({fill: '#f06'});
var group = draw.group();
var image = group.image('http://greenethumb.com/github/jquery-free-transform/example/assets/bandit!.png');
image.attr("width", 300).attr("height", 200);
group.clipWith(rect);


// initialize free transform (FT) element
$('#ft').freetrans({
    x: 0,
    y: 0,
    'rot-origin': '50% 50%'
});
                  
//function for copying FT transfomation into SVG mask element      
var refreshSVGMask = function(e) {

    //get raw transformation values
    var elTransform = $('#ft').css("transform");
    if(elTransform === null) elTransform = "(0,0,0,0,0,0)"; //quick fix for safari's     inability to split null string
    var values = elTransform.split('(')[1];

    values = values.split(')')[0];
    values = values.split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];
    var e = parseInt($("#ft").position().left);
    var f = parseInt($("#ft").position().top);

    var o = $("#ft").freetrans('getOptions');
    
    //before applying rotation, move to transform origin
    SVG.get("SvgjsRect1006").transform({
        x: -e,
        y: -f
    });
    //apply rotation:
    SVG.get("SvgjsRect1006").transform({
        rotation: o.angle
    });
    //restore translation, and apply scaling
    SVG.get("SvgjsRect1006").transform({
        x: e,
        y: f,
        scaleX: o.scalex,
        scaleY: o.scaley
    });

}

//event listener for simple dragging:
$(document).mousemove(function(e) {
    if (e.which == 1) {
        refreshSVGMask(e);
    }
});