如何让SVG自定义光标在macOS浏览器正常显示（Windows已生效）

针对你遇到的SVG光标在Windows正常、macOS浏览器（尤其是Chrome）不显示的问题，可通过以下几种方案解决：

1. 修复SVG文件的兼容性问题 #

macOS的Chrome等浏览器对SVG光标有严格的格式要求，需确保你的SVG满足以下条件：

• 必须指定viewBox属性：仅设置width和height不足以让浏览器识别光标尺寸，需添加viewBox定义SVG的坐标系统。例如：

  <svg viewBox="0 0 64 64" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
    <!-- 你的SVG图形内容 -->
  </svg>
  

• 限制光标尺寸：macOS浏览器通常要求自定义光标尺寸不超过64x64px，过大的SVG会被浏览器直接忽略。
• 简化SVG内容：移除不必要的滤镜、渐变或复杂路径，部分浏览器对包含复杂元素的SVG光标支持不佳。

2. 将SVG转为Base64内嵌到CSS #

把SVG代码转换为Base64字符串后直接内嵌到CSS中，可避免资源加载或跨域问题，同时提升Chrome对SVG光标的支持度：

1. 复制你的SVG代码（移除XML声明<?xml version="1.0" encoding="UTF-8"?>）
2. 使用Base64编码工具将其转为字符串
3. 在CSS中使用内嵌URL：

   html, body {
     cursor: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjQgNjQiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJ...'), auto;
   }
   

3. 添加PNG格式降级方案 #

由于macOS Chrome对SVG光标支持有限，可同时提供PNG格式的光标作为 fallback，确保所有浏览器都能显示自定义光标：

html, body {
  cursor: url('heel_single.png'), url('heel_single.svg'), auto;
}

补充说明 #

• Safari在macOS上对SVG光标支持相对较好，但仍需满足上述SVG格式要求；
• 测试时需清除浏览器缓存，避免旧资源干扰。

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