Rotate text around a pivot

Question

I'm simply trying to rotate the text having the center of the circle as pivot. I'm not clear how rotate(degrees, cx, cy) works (https://svgjs.dev/docs/3.0/manipulating/#rotate).

var draw = SVG().addTo('body').size(300, 130)
var g = draw.group()
var rect = g.rect(200, 100).fill('#f06').move(20, 20)
var circlePos = [50,50]
var circleSize = 50;
g.circle(circleSize).fill('#000').move(...circlePos)
var labelPos = [50,50]
var fontSize = 14
g.text("TEST").addClass("label").font({size: fontSize}).move(circlePos[0] + 5, circlePos[1]).transform({rotate:-45})

https://jsfiddle.net/alfredopacino/tLejr1kn/17/

Desired result:

Answer 1

In your reply to fuzzyma you have this

transform-box: fill-box;

I don't know what it does (!), but if you remove it the rotation looks more sensible.

You also have to set the origin of rotation relative to the group. And you have to set the text position very carefully - I suspect svg.js doesn't position text as I'd expect, which is why I am searching here. Check with a zero rotation.

Answer 2

As this question asks what I wanted to know I'll add what I've found. svs.js does indeed behave unexpectedly, but actually in a good way, once you understand.

.attr({ x: 100, y: 50})

positions the text like SVG - ie the baseline (that a smallcase x sits on) is 50, and the left side of the x character is 100.

.x(100).y(50)

positions the top left corner of the glyph. That is not the same.

The É character is probably the tallest alphabetic character, depending on font - taller than a capital X.

The font size gives the height of the glyph above the baseline (in user units). The glyph also extends below the baseline with descenders on eg small case y, g etc.

Your .move() is positioning the top left corner. I think you want to position so that the characters sit centrally on a line from the centre off the circle. The .cx() and .cy() do position the centres of the text, but there are 2 gotchas: the centre calculated is not necessarily the centre of the text; and the docs don't give any indication as to how many browsers understand whatever is happening - it may not work in the real world.

I did search for your transform-box: fill-box; and it is probably interfering with whatever svs.js does to find out how big the text is. In any event it is apparently not understood by 10% of browsers.

For my case I shall use .attr() and calculations - I hope that is safe.