#ailMouseIco:hover{
cursor: url(‘path-to-image.svg’), auto;
}
试试这个
正如罗伯特·朗森所指出的:
您既不能在数据 URI 中使用外部文件,也不能使用内联
<defs>
或 <symbol>
s 引用。
解决方法:您可以将光标精灵保存在外部 svg 文件中。
但是您还需要添加一个可见/渲染的
<use>
元素引用光标<symbol>
.<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;
}
<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>
现代浏览器需要更少的转义,你只需要
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>