Experimenting with SVG foreignObject

HTML

<svg width="500" height="500">

<g id="draggable" transform="translate(0,0)">
    <foreignObject  width="100" height="150">
    <div class="rect"></div>
  </foreignObject>
</g>

</svg>

CSS

foreignObject {
  overflow: visible;
}

.rect {
    width: 100px;
    height: 150px;
    box-shadow: rgba(0, 0, 0, 1) 0px 5px 10px;
    background: red;
 
}

JavaScript

var obj = document.getElementById("draggable");

var startX, startY, isStarted = false;
var startMatrix;

obj.addEventListener("mousedown", function(event) {
  isStarted = true;
  startX = event.pageX;
  startY = event.pageY;
  startMatrix = obj.transform.baseVal.getItem(0).matrix;
});

document.addEventListener("mousemove", function(event) {
  if (isStarted) {
    var moveX = event.pageX - startX;
    var moveY = event.pageY - startY;
    
    const newMatrix = obj.transform.baseVal.getItem(0).matrix;
    
    newMatrix.e = startMatrix.e + moveX;
    newMatrix.f = startMatrix.f + moveY;
    
    const {a, b, c, d, e, f} = newMatrix;
    const tran =  `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;

    obj.setAttribute("transform", tran);

  }
});

document.addEventListener("mouseup", function(event) {
  isStarted = false;
});