自定义SVG光标颜色与指定十六进制色值不符的原因及修复

浏览器在渲染自定义SVG光标时，会强制应用系统级的光标优化样式（比如自动添加深色阴影、调整亮度/对比度），目的是让光标在任何背景下都能清晰可见，这就导致SVG里的颜色和直接用background-color设置的色板出现偏差，该问题在Windows系统的浏览器上表现尤为明显。

另外，虽然你已正确转义#为%23，但部分浏览器对utf8编码的SVG data URI的颜色解析会存在细微偏差，不过这并非主要原因。

可以通过以下两种方法解决：

方法1：在SVG中禁用滤镜并明确渲染规则 #

修改SVG内容，添加filter: none和color-rendering: optimizeQuality样式，同时确保路径无额外描边，抵消浏览器的自动优化：

* {
  cursor: url('data:image/svg+xml;utf8,<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: none; color-rendering: optimizeQuality;"><path d="M8 16A8 8 0 108 0a8 8 0 000 16z" fill="%23FFE420" stroke="none"/></svg>'), auto;
}

.swatch {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: block;
  background-color: #FFE420;
}

方法2：使用Base64编码的SVG替代utf8编码 #

将SVG转换为Base64编码，避免浏览器对utf8 SVG的特殊解析处理，确保颜色完全一致：

1. 先写出原始SVG代码：

<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8 16A8 8 0 108 0a8 8 0 000 16z" fill="#FFE420"/>
</svg>

2. 转换为Base64编码后得到字符串：PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggMTZBOCA4IDAgMTgwIDBhOCA4IDAgMDAwIDE2eiIgZmlsbD0iI0ZGRUQyMCIvPjwvc3ZnPg==
3. 替换CSS中的光标URL：

* {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTggMTZBOCA4IDAgMTgwIDBhOCA4IDAgMDAwIDE2eiIgZmlsbD0iI0ZGRUQyMCIvPjwvc3ZnPg=='), auto;
}

.swatch {
  width: 100px;
  height: 100px;
  margin-top: 20px;
  display: block;
  background-color: #FFE420;
}

额外提示 #

如果仍存在细微偏差，可尝试给SVG路径添加一个和填充色完全相同的0.5px描边，抵消浏览器自动添加的阴影效果：

<path d="M8 16A8 8 0 108 0a8 8 0 000 16z" fill="#FFE420" stroke="#FFE420" stroke-width="0.5"/>

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