这是代码:
var svgUrl = "url('" + 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"' +
' version="1.1" width="32" height="32"><circle cx="16" cy="16" r="16" ' +
' style="fill: red;"/></svg>' +
"'), auto;";
这不起作用:
$("body").css('cursor', svgUrl);
这按预期工作:
$("body").css('cursor', "wait");
我尝试插入 SVG 标签以将其渲染为纯 HTML，它确实渲染了一个圆圈，所以我认为 SVG 标记没问题。我分割了 svgUrl 行以使其更具可读性。我已经缩小了问题范围并提供了简单的代码来解决主要问题。在应用程序中，光标会动态变化...
接受答案后编辑:
接受的答案解决了所提出的问题。但是，我想知道为什么如果我使用答案中提供的字符串，这不起作用？
var theCursor = "url(\"" + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'" +
" version='1.1' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='16'" +
" style='fill: blue;'/%3E%3C/svg%3E\"), auto;";
$("body").css('cursor', theCursor);
最佳答案
我重写了光标规则以保留您的串联。请注意，某些引号已被转义。
为了使其正常工作，我正在创建一个新的
<style><head>中的元素我正在设置textContent = theCursor;
var s = document.createElement("style");
document.head.appendChild(s);
let theCursor = "body{cursor: url(\"" + "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'"
+
" version='1.1' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='16'" +
" style='fill: blue;'/%3E%3C/svg%3E\"), auto;}";
s.textContent = theCursor;body{
height:100vh;
/*
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='16' style='fill: red;'/%3E%3C/svg%3E"), auto;}
*/
}<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32">
<circle cx="16" cy="16" r="16" style="fill: red;"/>
</svg>关于jquery - SVG url 光标不改变光标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62981962/