本文详解如何修复自定义光标（含旋转文字环与三角形图标）在视频等动态区域 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、容器尺寸、内部图形坐标三者完全匹配。
✅ 推荐实现结构（精简可靠版）
<!-- 触发区域（可为 video、div 或任意容器） -->
<div id="surface">
<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" stroke-width="2"/>
<text fill="#fff" font-family="Helvetica Neue, Arial" font-size="24" font-weight="bold">
<textPath xlink:href="#circlePath">Jouer la vidéo - Jouer la vidéo -</textPath>
</text>
</svg>
<svg id="triangle" viewBox="0 0 24 48">
<polygon points="0,0 24,24 0,48" fill="#e1e1e1"/>
</svg>
</div>/* 光标容器：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 加速合成，帧率稳定。
通过以上结构化改造，光标组件将彻底脱离“计算偏移”陷阱，在任意分辨率、任意嵌套深度的媒体元素上均保持像素级精准对齐——这是专业级自定义光标体验的基石。
