如何以圆心为轴旋转文本？svg.js的rotate方法用法咨询

要实现以圆心为轴旋转文本，你需要正确使用rotate(degrees, cx, cy)方法指定旋转原点，你当前写法的问题是调用transform({rotate:-45})时没有指定旋转原点，默认会以文本元素自身的左上角为轴旋转，自然和预期效果不符。

rotate(degrees, cx, cy) 用法说明 #

• 第一个参数degrees：必填，旋转角度，正数为顺时针旋转，负数为逆时针旋转
• 第二个、第三个参数cx、cy：选填，旋转原点的x、y坐标，不传时默认以元素自身中心为旋转轴

你代码里的圆形左上角坐标为circlePos，直径为circleSize，因此圆心坐标计算方式为：

• 圆心x坐标：circlePos[0] + circleSize / 2
• 圆心y坐标：circlePos[1] + circleSize / 2

修改后的代码如下：

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
// 改动点：调用rotate方法，传入角度和圆心坐标作为旋转原点
g.text("TEST").addClass("label").font({size: fontSize}).move(circlePos[0] + 5, circlePos[1]).rotate(-45, circlePos[0] + circleSize/2, circlePos[1] + circleSize/2)

如果你更习惯用transform方法实现，也可以直接在transform参数里指定origin属性，写法如下：

g.text("TEST").addClass("label").font({size: fontSize}).move(circlePos[0] + 5, circlePos[1]).transform({
  rotate: -45,
  origin: [circlePos[0] + circleSize/2, circlePos[1] + circleSize/2]
})

内容的提问来源于stack exchange，提问作者alfredopacino