SVG自定义光标失效问题：为何部分SVG格式光标无法工作？

我已经确认SVG的height、width符合限制，也在HTML里验证过SVG本身能正常渲染，但把它用作cursor时就是不行，肯定漏了什么细节。

正常工作的示例 #

CSS #

.container2 {
  width: 50vw;
  height: 50vh;
  background: green;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="white" transform="scale(1 -1)"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>') 12 12, auto;
}

HTML #

<div class="container2"></div>

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="black" fill="white" transform="scale(1 -1)"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>

无法工作的示例 #

CSS #

.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" width="24" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve"> <g id="XMLID_87_"> <path id="XMLID_88_" d="M325.606,304.394L223.329,202.116c16.707-21.256,26.682-48.04,26.682-77.111   C250.011,56.077,193.934,0,125.005,0C56.077,0,0,56.077,0,125.006C0,193.933,56.077,250.01,125.005,250.01   c29.07,0,55.855-9.975,77.111-26.681l102.277,102.277C307.322,328.536,311.161,330,315,330s7.678-1.464,10.606-4.394   C331.465,319.749,331.465,310.251,325.606,304.394z M30,125.006C30,72.619,72.619,30,125.005,30   c52.387,0,95.006,42.619,95.006,95.005c0,52.386-42.619,95.005-95.006,95.005C72.619,220.01,30,177.391,30,125.006z"/> <path id="XMLID_91_" d="M155.005,110.006h-15v-15c0-8.284-6.716-15-15-15s-15,6.716-15,15v15h-15c-8.284,0-15,6.716-15,15   s6.716,15,15,15h15v15c0,8.284,6.716,15,15,15s15-6.716,15-15v-15h15c8.284,0,15-6.716,15-15S163.289,110.006,155.005,110.006z"/> </g> </svg>') 12 12, pointer !important;
}

HTML #

<div class="container"></div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" width="24" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve"> 
  <g id="XMLID_87_"> 
    <path id="XMLID_88_" d="M325.606,304.394L223.329,202.116c16.707-21.256,26.682-48.04,26.682-77.111   C250.011,56.077,193.934,0,125.005,0C56.077,0,0,56.077,0,125.006C0,193.933,56.077,250.01,125.005,250.01   c29.07,0,55.855-9.975,77.111-26.681l102.277,102.277C307.322,328.536,311.161,330,315,330s7.678-1.464,10.606-4.394   C331.465,319.749,331.465,310.251,325.606,304.394z M30,125.006C30,72.619,72.619,30,125.005,30   c52.387,0,95.006,42.619,95.006,95.005c0,52.386-42.619,95.005-95.006,95.005C72.619,220.01,30,177.391,30,125.006z"/> 
    <path id="XMLID_91_" d="M155.005,110.006h-15v-15c0-8.284-6.716-15-15-15s-15,6.716-15,15v15h-15c-8.284,0-15,6.716-15,15   s6.716,15,15,15h15v15c0,8.284,6.716,15,15,15s15-6.716,15-15v-15h15c8.284,0,15-6.716,15-15S163.289,110.006,155.005,110.006z"/> 
  </g> 
</svg>

问题原因及修复方案 #

问题分析 #

无法工作的SVG主要有几个关键问题：

• 多余的空格和换行：data URI对空白字符敏感，大量冗余空格会导致浏览器解析失败
• 无用属性干扰：xmlns:xlink（未使用xlink功能）、version="1.1"、id、xml:space="preserve"这些属性对光标渲染没有作用，反而增加解析风险
• SVG结构冗余：多余的换行和缩进会破坏data URI的格式

修复后的CSS #

.container {
  width: 50vw;
  height: 50vh;
  background: gold;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" width="24" height="24" viewBox="0 0 330 330"><path d="M325.606 304.394L223.329 202.116c16.707-21.256 26.682-48.04 26.682-77.111C250.011 56.077 193.934 0 125.005 0 56.077 0 0 56.077 0 125.006c0 68.927 56.077 125 125.005 125 29.07 0 55.855-9.975 77.111-26.681l102.277 102.277c2.929 2.929 7.678 4.394 11.606 4.394s7.678-1.465 10.606-4.394c5.859-5.858 5.859-15.356 0-21.214zM30 125.006C30 72.619 72.619 30 125.005 30S220.011 72.619 220.011 125.005c0 52.386-42.619 95.005-95.006 95.005C72.619 220.01 30 177.391 30 125.006z"/><path d="M155.005 110.006h-15v-15c0-8.284-6.716-15-15-15s-15 6.716-15 15v15h-15c-8.284 0-15 6.716-15 15s6.716 15 15 15h15v15c0 8.284 6.716 15 15 15s15-6.716 15-15v-15h15c8.284 0 15-6.716 15-15s-6.716-15-15-15z"/></svg>') 12 12, pointer !important;
}

修复要点 #

1. 压缩SVG：去掉所有多余空格、换行，将SVG代码精简为一行
2. 删除无用属性：移除xmlns:xlink、version、id、xml:space="preserve"等非必要属性
3. 优化path数据：去掉path里多余的逗号分隔，保持数据简洁

这样处理后，浏览器就能正确解析data URI作为自定义光标了，同时光标热点坐标12 12和24x24的SVG尺寸匹配，显示正常。

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