SVG url 光标未更改光标

Question

代码如下：

 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);

Answer 1

我重写了游标规则以保持连接。请注意，一些引号被转义了。
为了让它工作，我在 <head> 中创建了一个新的 <style> 元素，并且我正在设置 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>

SVG url 光标未更改光标

SVG url cursor not changing cursor

jquery

svg

cursor