ROTATE fixed

by alfredopacino

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>

CSS

.label {
  transf orm-box: fill-box;
  transf orm-origin: center;
  text-an chor: end;
  tr ansform-origin: 50% 50%;

}

.rect {
    transform-origin: 50% 50%;
}

JavaScript

var draw = SVG().addTo('body').size(500, 500)

var g = draw.group()
var rect = g.rect(200, 100).fill('#f06').move(20, 20)

var circlePos = [100,50]
var circleSize = 50;
g.circle(circleSize).fill('#000').move(...circlePos)
var labelPos = [50,50]
var fontSize = 14
var rotationCenter = [25,25]
g.circle(5).cx(circlePos[0] + circleSize/2).cy(circlePos[1] + circleSize/2).fill("#fff")
g.text("TEST TEST TEST TEST ").addClass("label").font({size: fontSize})
  .x(circlePos[0] + circleSize)
  .cy(circlePos[1] + circleSize/2)
  .animate({duration:2000}).rotate(-45,circlePos[0] + circleSize/2,circlePos[1] + circleSize/2)