本文详解如何使用纯 css（配合 svg）实现一个居中对齐、绕自身中心完整旋转 360° 的自定义光标文字环，解决常见偏移问题，并提供可复用的响应式定位与动画方案。
在构建高级自定义光标（Custom Cursor）效果时，一个高频需求是：当鼠标悬停于指定区域（如 .box）时，隐藏原生光标，并显示一组动态元素——包括三角形指针、圆形外框和环绕排布的旋转文字环。其中，文字环需严格绕自身几何中心 360° 匀速旋转，且整体组件必须精准居中于鼠标坐标点。许多开发者遇到的核心问题是：文字看似在转，实则绕着 SVG 画布原点或错误锚点旋转，导致视觉漂移、错位甚至“甩飞”。
根本原因在于：SVG 中 <textPath> 文字默认沿路径排布，但旋转动画若直接作用于 <svg> 或 <g> 容器，会因 transform-origin 缺失或 viewBox/transform 层叠而偏离预期中心。正确解法是 **将旋转锚点精确锁定在 SVG 内部逻辑中心（即 cx="150" cy="150"），并通过 transform-box: fill-box + transform-origin: center 双保险控制。
以下是关键实现步骤与优化代码：
✅ 正确的 SVG 结构与旋转声明
<div id="circle">
<svg viewBox="0 0 300 300" width="300" height="300"
style="transform: translate(-50%, -50%); transform-box: fill-box;">
<defs>
<!-- 定义完美同心圆路径：圆心(150,150)，半径60 -->
<path id="circlePath" d="M 150,150 m -60,0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0" />
</defs>
<!-- 可选：绘制参考圆（上线后可移除） -->
<circle cx="150" cy="150" r="60" fill="none" stroke="#fff" stroke-width="1" opacity="0.2"/>
<!-- 文字组：确保 transform-origin 生效 -->
<g transform="translate(150,150)" style="transform-origin: center; animation: rotate 5s linear infinite;">
<text fill="#fff" font-size="24" font-weight="bold" text-anchor="middle">
<textPath href="#circlePath" startOffset="0%">Jouer la vidéo - Jouer la vidéo -</textPath>
</text>
</g>
</svg>
</div>✅ 精准 CSS 动画（现代写法，无需前缀）
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#circle svg g {
transform-origin: center; /* 关键！覆盖默认 top-left */
animation: rotate 5s linear infinite;
}✅ JavaScript 定位：消除累积误差
避免多次 left/top 赋值导致的布局抖动，统一使用 transform: translate3d()：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('mousemove', (e) => {
const x = e.clientX;
const y = e.clientY;
// 所有光标元素统一用 translate3d 居中
document.querySelector('#circle').style.transform = `translate3d(${x}px, ${y}px, 0)`;
document.querySelector('#triangle').style.transform = `translate3d(${x}px, ${y}px, 0)`;
document.querySelector('.cursor').style.transform = `translate3d(${x}px, ${y}px, 0)`;
});⚠️ 注意事项与调试技巧
- viewBox 必须匹配内部坐标系：本例 viewBox="0 0 300 300" 与路径圆心 150,150 严格对应，不可随意缩放 width/height 后忽略 viewBox。
- 禁用 transform 层叠干扰：若父容器已有 transform，请添加 transform-style: preserve-3d 或改用 position: fixed + left/top。
- 调试旋转中心：临时添加 <circle cx="150" cy="150" r="5" fill="red"/> 验证是否真正绕红点旋转。
- 性能优化：对 .cursor 类使用 will-change: transform，启用 GPU 加速。
最终效果：文字环如钟表指针般平稳、无抖动地绕自身中心匀速公转，三角形与圆形外框始终像素级对齐于鼠标热点，且在任意屏幕尺寸下保持精准居中。此方案已通过 Chrome/Firefox/Safari 兼容性验证，可直接集成至现代前端项目中。
