SVG动画实现：父元素绕中心旋转时保持文本水平（svg.js）

嘿，这个需求其实很好实现！核心思路就是让装着ETH / USD的圆形绕中心点旋转的同时，让文本自身反向旋转相同的角度，抵消掉容器的旋转，这样文本就能始终保持水平啦～我用svg.js给你写个完整的示例，你一看就懂：

完整代码示例 #

// 创建SVG画布，设置尺寸（你可以根据自己的需求调整）
const draw = SVG().addTo('body').size(400, 400)
const centerX = 200 // 整个动画的中心点X坐标
const centerY = 200 // 整个动画的中心点Y坐标

// 先画几个固定的圆形（模拟你现有动画里的其他圆）
for (let i = 0; i < 3; i++) {
  draw.circle(60)
    .cx(centerX + Math.cos((i * 120 * Math.PI)/180) * 100)
    .cy(centerY + Math.sin((i * 120 * Math.PI)/180) * 100)
    .fill('#eee')
    .stroke('#333')
}

// 创建一个组来承载要旋转的圆形和文本，方便统一控制旋转
const rotatingGroup = draw.group()

// 绘制需要旋转的圆形
const rotatingCircle = rotatingGroup.circle(60)
  .cx(centerX + 100) // 初始位置和其他圆保持同一半径
  .cy(centerY)
  .fill('#42b983')
  .stroke('#333')

// 添加`ETH / USD`文本
const ethText = rotatingGroup.text('ETH / USD')
  .cx(centerX + 100)
  .cy(centerY)
  .font({ size: 12, family: 'Arial', anchor: 'middle', leading: '1.2' })

// 实现旋转动画：让组绕中心点无限循环旋转
rotatingGroup.animate(5000, '<>') // 5秒转一圈，<>表示往返动画，你可以改成'linear'匀速
  .loop()
  .attr({ transformOrigin: `${centerX} ${centerY}` }) // 关键：设置旋转原点为整个动画的中心
  .rotate(360, centerX, centerY)
  .during(function(pos) {
    // 动画每一帧执行：让文本反向旋转相同角度，抵消组的旋转
    const currentRotation = pos * 360
    ethText.rotate(-currentRotation, centerX + 100, centerY)
  })

关键逻辑解释 #

• 旋转原点设置：通过transformOrigin把组的旋转中心指定为整个动画的中心点，确保圆形绕正确的位置旋转
• 反向抵消旋转：利用svg.js的during回调，在动画的每一帧计算当前的旋转进度，让文本反向旋转相同的角度，这样文本就不会跟着圆形一起转，始终保持水平
• 灵活调整：如果你的画布尺寸、圆形大小或位置不同，只需要修改centerX、centerY以及圆形的初始坐标即可，核心逻辑完全通用

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