如何在React中实现支持对齐与Tailwind旋转动画的环形文本？

由于react-curved-text包在对齐控制和动画兼容性上存在局限，推荐直接使用SVG原生的<textPath>组件实现需求，完全可控且能完美适配Tailwind动画。

步骤1：修正Tailwind动画配置 #

你的spinner动画方向逻辑有误，平滑无限旋转应该从0deg转到360deg，更新tailwind.config.js：

theme: {
    extend: {
      keyframes: {
        spinner: {
          "0%": { transform: "rotate(0deg)" },
          "100%": { transform: "rotate(360deg)" },
        },
      },
      animation: {
        rotater: "spinner 10s linear infinite",
      },
    },
  },

步骤2：实现环形文本组件 #

用SVG创建环形路径，并绑定文本，直接给SVG添加动画类即可实现旋转：

import React from 'react';

const RotatingCurvedText = () => {
  return (
    {/* 父容器：控制整体大小和定位基准 */}
    <div className="relative w-96 h-60">
      {/* SVG容器：直接应用Tailwind动画类 */}
      <svg 
        viewBox="0 0 370 300" 
        className="rotater absolute inset-0" 
        preserveAspectRatio="xMidYMid meet"
      >
        {/* 定义环形路径（和你之前配置的rx/ry/cx/cy完全匹配） */}
        <defs>
          <circle 
            id="curved-circle" 
            cx="190" 
            cy="120" 
            r="80" 
            fill="none"
          />
        </defs>
        {/* 绑定文本到环形路径 */}
        <text fontSize="20.5" fill="currentColor">
          <textPath 
            href="#curved-circle" 
            startOffset="0%"
            textLength="502.65" {/* 正圆周长：2π*80≈502.65，让文本均匀分布 */}
            spacing="auto"
          >
            Sanah Shop - Sanah shop - Sanah shop - Sanah shop - 
          </textPath>
        </text>
      </svg>
    </div>
  );
};

export default RotatingCurvedText;

关键细节说明 #

• 对齐控制：通过父容器的relative定位，配合SVG的absolute inset-0和preserveAspectRatio="xMidYMid meet"，确保环形文本在父元素中居中对齐，也可调整cx/cy/r参数改变环形位置。
• 动画生效：直接将rotater类添加到SVG元素上，SVG原生支持transform属性，Tailwind动画可直接生效。
• 文本反向排列：如果需要文本沿环形内侧排列，可给<textPath>添加side="left"属性。
• 文本均匀分布：textLength设置为环形路径的周长，确保文本完全贴合路径无间隙或重叠。

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