#ailMouseIco:hover{
 cursor: url(‘path-to-image.svg’), auto;
}

试试这个

正如罗伯特·朗森所指出的：
在数据URI中既不能使用外部文件，也不能使用内联的<defs>或<symbol>引用。
解决办法：您可以将光标精灵保存在外部svg文件中。
但是还需要添加一个引用光标<symbol>的可见/呈现的<use>元素。
否则，光标将不会显示：

外部svg文件：cursor.svg

<svg xmlns="http://www.w3.org/2000/svg" width='32' height='32' viewBox="0 0 51.2 76.5">
  <symbol id="ailMouseIco" viewBox="0 0 51.2 76.5">
    <path fill="#FFF" stroke="#000" stroke-width="3" d="M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z" />
  </symbol>
  <!-- cursor icon needs rendered use istance-->
  <use id="useCursor" href="#ailMouseIco" />
</svg>

验证码：

html,
body {
    height: 100%;
    width: 100%;
    background: #eee;
    cursor: url("cursor.svg") 16 16, default;
}

HTML用法

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.2 76.5" width="30" height="30">
    <use href="cursor.svg#ailMouseIco"></use>
</svg>

您的svg需要托管在同一个域上-否则CORS规则将阻止svg加载/渲染。

只需调整您的SVG以适应url语法...

div {
  margin : 1em;
  width  : 20em;
  height : 10em;
  background : lightgreen;
  cursor : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5'%3E%3Cpath fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/%3E%3C/svg%3E") 3 3, pointer;
}

<div></div>

现代的浏览器需要更少的转义，您只需要

• 使用**%23转义所有#**
• 将所有**"**替换为单引号
• 也不需要旧的xlink表示法

内联SO代码段无法正确运行;

div {
  margin : 1em;
  width  : 20em;
  height : 10em;
  background : lightgreen;
  cursor : url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='52px' height='76px' viewbox='0 0 51.2 76.5' style='background:red'><path fill='%23FFF' stroke='%23000' stroke-width='3' d='M47.5 48.6l-46-45v62l14-13 10 22 10-4-10-22h22z'/></svg>") 3 3, pointer;
}

<div></div>