自定义SVG光标宽高超过128后消失，如何突破尺寸限制扩大光标

触发限制的原因 #

主流桌面浏览器对cursor属性加载的自定义光标资源有强制的尺寸上限：最大宽高不能超过128px，只要资源尺寸超过这个阈值，浏览器会直接忽略该自定义光标定义，自动回退到系统默认光标样式。这是W3C规范推荐的交互限制，目的是避免过大光标干扰正常的界面操作。

可选解决方案 #

方案1：SVG viewBox适配（仅适用于视觉尺寸≤128px的场景） #

如果实际需要的光标视觉尺寸不超过128px，仅需要调整内部圆形的参数逻辑，可以保持SVG根节点的width和height固定为128px，通过viewBox属性缩放内部坐标即可适配任意半径参数：

const targetRadius = 64; // 可自定义，只要视觉尺寸不超过128px
const svgTotalSize = targetRadius * 2;
document.getElementById('one').style.cursor = `url('data:image/svg+xml;utf8,<svg width="128" height="128" viewBox="0 0 ${svgTotalSize} ${svgTotalSize}" xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="${targetRadius}" fill="yellow" /></svg>') 64 64, auto`;

方案2：DOM模拟自定义光标（无尺寸限制，推荐超过128px时使用） #

如果需要半径超过64px、总尺寸大于128px的光标，直接放弃原生cursor属性，用绝对定位的DOM元素跟随鼠标实现自定义光标，完全不受尺寸限制，动态调整大小、样式也更灵活：

新增自定义光标DOM

<div id="custom-cursor" style="position:fixed; top:0; left:0; pointer-events:none; border-radius:50%; z-index:99999;"></div>

实现光标跟随与动态尺寸

const customCursor = document.getElementById('custom-cursor');
// 可随意设置半径，不受128px限制
const cursorRadius = 100;
// 设置光标尺寸、样式
customCursor.style.width = `${cursorRadius * 2}px`;
customCursor.style.height = `${cursorRadius * 2}px`;
customCursor.style.background = 'yellow';
// 隐藏系统原生光标
document.body.style.cursor = 'none';
// 监听鼠标移动更新光标位置
document.addEventListener('mousemove', e => {
  // 偏移量设置为半径值，实现光标中心对准鼠标点
  customCursor.style.transform = `translate(${e.clientX - cursorRadius}px, ${e.clientY - cursorRadius}px)`;
});

内容的提问来源于stack exchange，提问作者Vikas Acharya