CSS自定义鼠标指针：使用cursor:url加载SVG或图片

为网站更换个性化的鼠标指针，通过 cursor: url() 属性加载自定义的 SVG 或图片，是一个常见的需求。然而，在实际操作中，浏览器对此有诸多限制，若处理不当，自定义光标可能无法显示，并回退到默认箭头样式。

为何 cursor: url("icon.png") 无法生效？

最常见的原因是缺少备用方案。url() 后面必须至少跟随一个 CSS 标准光标关键字，例如 pointer、auto 或 default。如果仅单独使用 url("x.png")，现代浏览器会视其为不完整的规则而直接忽略。

• 错误示例：cursor: url("hand.png");
• 正确示例：cursor: url("hand.png"), pointer;
• 更稳妥的示例：cursor: url("hand.cur"), url("hand.png"), pointer;（浏览器会依次尝试 .cur 格式、.png 格式，最后回退到 pointer）

如何在 url() 中使用 SVG 作为光标？

直接引用 SVG 文件路径通常无效。SVG 文件需要先转换为 base64 格式的 data URL，并确保编码过程正确，否则浏览器解析失败后同样会跳过此项。

• 转换的核心步骤是对 SVG 字符串进行编码：通常顺序为 encodeURIComponent → unescape → window.btoa，顺序不可颠倒。
• 最终生成的 data URL 格式应为：data:image/svg+xml;base64,xxxx
• 示例代码：

  const svg = ``;
  const dataUrl = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));
  element.style.cursor = `url(${dataUrl}) 12 12, default`;

如何正确设置图片尺寸、格式与热点坐标？

主流浏览器（如 Chrome、Edge、Safari）对自定义光标有明确的尺寸限制：推荐不超过 32×32 像素，最大也不宜超过 128×128 像素。若尺寸超标，浏览器可能直接拒绝使用，甚至在某些旧版本中会静默失败。

• 格式优先级：.cur（Windows 光标格式）兼容性最佳，其次是 .png 和 .gif；.jpg 格式基本不被支持，不建议使用。
• 热点坐标（x y）：此参数可选，但强烈建议设置。它定义了鼠标点击的逻辑落点。例如，一个 24×24 的图标，其中心点坐标即为 12 12。若不设置，默认使用左上角 0 0，可能导致点击位置不准确。
• 路径问题：url() 中的路径是相对于当前 CSS 文件的位置，而非 HTML 文件。部署后若光标不显示，可打开开发者工具的 Network 面板，确认图片资源是否成功加载（状态码 200）。

为 body 设置全局光标时需注意什么？

为 body 元素设置 cursor: url(...), auto 看似一劳永逸，但实际可能遇到两个典型问题：

• 样式覆盖：如果页面内的子元素（如按钮）自行设置了 cursor 属性（例如 cursor: pointer），它将覆盖从 body 继承的光标样式。这是 CSS 层叠规则的正常表现。
• iframe 隔离：若页面中嵌入了跨域 iframe，其内部的光标样式不受父页面控制。只有同源的 iframe 才会继承父页面的光标设置。
• 性能提示：如需为大量元素（如表格的每一行）设置 hover 状态下的光标切换，频繁修改 style.cursor 可能触发重绘。更优的做法是通过切换 CSS 类名来实现。

总而言之，自定义光标的难点不在于书写 cursor 代码，而在于确保其在所有浏览器及各种场景（不同路径、尺寸、编码）下都能稳定、优雅地显示。备用值、尺寸限制、编码格式与热点坐标，这四个要素缺一不可。