本文详解如何修复自定义光标（含旋转文字环与三角形图标）在视频等动态区域 hover 时出现的位置偏移问题，核心在于统一使用 css 变量 + `viewbox` 精确控制 svg 定位，彻底避免混用百分比与像素导致的计算失准。
在实现高级自定义光标（如带动画文字环 #circle 和指示三角形 #triangle）时，一个常见却棘手的问题是：当鼠标移入
- .cursor 使用 transform: translate3d(calc(${x}px - 50%), ...) —— 百分比偏移依赖元素自身宽高；
- #circle 和 #triangle 却通过 left/top 绝对定位到视口坐标，但其内部 SVG 的 viewBox、
路径及 CSS 尺寸未做严格对齐； - 更关键的是，
✅ 正确解法：放弃 left/top 动态赋值，改用 CSS 自定义属性 + transform: translate() 统一驱动，同时确保 SVG 的 viewBox、容器尺寸、内部图形坐标三者完全匹配。
✅ 推荐实现结构（精简可靠版）
/* 光标容器：160×160px 正方形，中心锚点设为 (0,0) */
#cursorVideo {
position: fixed;
top: -80px; /* 半宽上移 → 实际中心在 (0,0) */
left: -80px;
width: 160px;
height: 160px;
--movXY: 0px, 0px;
transform: translate(var(--movXY));
pointer-events: none;
z-index: 9999;
}
/* 仅当悬停目标时显示 */
.noDisplay { display: none; }
/* 圆环 SVG：严格匹配容器尺寸，viewBox 保证缩放一致性 */
#circle {
position: absolute;
top: 0; left: 0;
width: 160px; height: 160px;
}
#circle circle { stroke: #e1e1e1; stroke-width: 2; }
#circle text { font-size: 24px; }
/* 三角形：绝对定位在容器内居中（160×160 容器中，24×48 三角形中心 ≈ (72,56)） */
#triangle {
position: absolute;
left: 72px; /* (160 - 24) / 2 */
top: 56px; /* (160 - 48) / 2 */
width: 24px; height: 48px;
fill: #e1e1e1;
}// 使用 CSS 变量驱动，零 DOM 操作开销
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');
});⚠️ 关键注意事项
-
viewBox 必须精确：#circle 的 viewBox="70 70 160 160" 中 70,70 是路径原点偏移，确保
在 SVG 坐标系中真正居中；若修改 viewBox，需同步调整所有 cx/cy/r 值。 - 禁用原生光标：务必在触发区域（如 #surface）设置 cursor: none，否则浏览器会在底层绘制默认光标，造成双光标或遮挡。
- 视频元素特殊处理：
- 性能优化：避免在 mousemove 中频繁读取/写入 offsetWidth 等布局属性；本方案仅更新 CSS 变量，由 GPU 加速合成，帧率稳定。
通过以上结构化改造，光标组件将彻底脱离“计算偏移”陷阱，在任意分辨率、任意嵌套深度的媒体元素上均保持像素级精准对齐——这是专业级自定义光标体验的基石。
