本文详解如何修复自定义光标（圆形文字环 + 三角形图标）在视频元素上悬停时因混合使用百分比与像素定位导致的错位问题，提供基于 css `transform: translate()` 和精确 `viewbox` 匹配的稳定对齐方案。
在实现高级自定义光标（如带旋转文字环的 SVG 圆盘 + 指向三角形）时，一个常见却隐蔽的陷阱是：混用相对单位（如 %）与绝对单位（如 px）进行定位计算。您原始代码中通过 transform: translate3d(calc(${e.clientX}px - 50%), ...) 动态移动 .cursor 元素，看似合理，但 calc(... - 50%) 实际依赖于元素自身的宽高百分比基准——而当该元素是 position: fixed 且未显式设定尺寸上下文时，浏览器对 50% 的解析会因父容器、viewBox 缩放、SVG 渲染机制等产生偏差，尤其在 <video> 这类原生控件区域，其内部渲染层与 CSS 布局层存在细微差异，最终表现为三角形和文字环随屏幕尺寸变化发生“漂移”。
✅ 正确解法的核心原则是：统一坐标系，消除百分比歧义。我们应完全放弃 translate3d(calc()) 这类混合计算，改用纯 CSS 自定义属性 + transform: translate()，并确保所有 SVG 元素的 viewBox 与 CSS 尺寸严格对应。
✅ 推荐实现方案（精简可靠版）
1. HTML 结构优化
将光标容器独立为单一 #cursorVideo 元素，内含两个语义化 SVG：
<div id="surface">
<!-- 替换为您的 .box2 或 video 容器 -->
<video controls loop muted>
<source src="your-video.webm" type="video/webm">
</video>
</div>
<div id="cursorVideo" class="noDisplay">
<svg id="circle" viewBox="70 70 160 160">
<defs>
<path id="circlePath" d="M150,150 m-60,0 a60,60 0 0,1 120,0 a60,60 0 0,1-120,0"/>
</defs>
<circle cx="150" cy="150" r="50" fill="none"/>
<g>
<use xlink:href="#circlePath" fill="none"/>
<text fill="#fff">
<textPath xlink:href="#circlePath">Jouer la vidéo - Jouer la vidéo -</textPath>
</text>
</g>
</svg>
<svg id="triangle" viewBox="0 0 24 48">
<polygon points="0,0 24,24 0,48"/>
</svg>
</div>? 关键点：viewBox 必须与 CSS 设置的 width/height 成比例。例如 #circle 的 viewBox="70 70 160 160" 对应 CSS 中 width: 160px; height: 160px;，确保 SVG 内部坐标系与外部布局完全对齐。
2. CSS 精准控制（无百分比偏移）
#cursorVideo {
position: fixed;
top: -80px; /* 半宽半高 → 以中心为锚点 */
left: -80px;
width: 160px;
height: 160px;
--movXY: 0px, 0px;
transform: translate(var(--movXY));
pointer-events: none;
z-index: 9999;
}
#cursorVideo:not(.noDisplay) #circle {
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from { transform: rotate(360deg); }
to { transform: rotate(0); }
}
#circle {
position: absolute;
top: 0; left: 0;
width: 160px; height: 160px;
}
#circle circle {
stroke: #e1e1e1;
stroke-width: 2;
}
#circle text {
font-family: "Helvetica Neue", Arial;
font-size: 24px;
font-weight: bold;
}
#triangle {
position: absolute;
left: 72px; /* (160 - 24) / 2 = 68 → 微调至72保证视觉居中 */
top: 56px; /* (160 - 48) / 2 = 56 → 精确垂直居中 */
width: 24px;
height: 48px;
fill: #e1e1e1;
}3. JavaScript：轻量级事件绑定
const surface = document.querySelector('#surface');
const cursorV = document.querySelector('#cursorVideo');
surface.addEventListener('mouseenter', e => {
cursorV.style.setProperty('--movXY', `${e.clientX}px, ${e.clientY}px`);
cursorV.classList.remove('noDisplay');
});
surface.addEventListener('mousemove', e => {
cursorV.style.setProperty('--movXY', `${e.clientX}px, ${e.clientY}px`);
});
surface.addEventListener('mouseleave', () => {
cursorV.classList.add('noDisplay');
});⚠️ 注意事项与调试建议
- 避免 pointer-events: none 误伤交互：确保 #cursorVideo 不遮挡底层视频控件（已通过 z-index 和 pointer-events: none 保障）。
- viewBox 是核心：若调整 SVG 尺寸，请同步修改 viewBox 值（如改为 width: 200px，则 viewBox 应为 "50 50 200 200" 并重算三角形 left/top）。
- 响应式适配：如需适配移动端，可在 @media 中动态修改 --movXY 计算逻辑，或使用 getBoundingClientRect() 获取相对视口坐标。
- 性能提示：mousemove 事件高频触发，本方案仅更新 CSS 变量，由 GPU 加速合成，远优于频繁操作 style.left/top。
通过此方案，光标元素不再依赖易变的百分比计算，而是以固定尺寸 SVG + 精确 viewBox + CSS 变量驱动 transform，彻底解决跨设备、跨元素（尤其是 <video>）的定位漂移问题，实现真正稳定的视觉对齐。
