本文详解如何修复自定义光标（含旋转文字环与三角形图标）在视频等动态区域 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 加速合成，帧率稳定。
通过以上结构化改造，光标组件将彻底脱离“计算偏移”陷阱，在任意分辨率、任意嵌套深度的媒体元素上均保持像素级精准对齐——这是专业级自定义光标体验的基石。